d3框架学习
小飞侠-2
我的github地址https://github.com/liujiekasini 欢迎大家分享讨论
展开
-
D3.js-基础知识
数据可视化已变得越来越被重视,市面上也出现了越来越多的图标库,如Highcharts。图标库很容易可以上手,然而在当前注重用户交互的时代,其不易交互性突显的越来越明显。一、数据可视化数据可视化起源于18世纪,当时使用柱形图和折线图来表示国家进出口量。近年,随着大数据时代的到来,数据可视化作为大数据量的呈现方式,成为当前重要的课题。数据可视化的目的,是要对数据进行可视化处理,以使转载 2017-08-21 12:21:32 · 536 阅读 · 0 评论 -
d3 经典版本
.link { fill: none; stroke: #666; stroke-width: 1.5px;}#licensing { fill: green;}.link.licensing { stroke: green;}.link.resolved { stroke-dasharray: 0,2 1;}转载 2017-10-11 10:08:55 · 1058 阅读 · 0 评论 -
d3学习笔记
1.选择器 select selectAll2.数据绑定 datanum 绑定单个 data 绑定数组在数据和绑定标签不对应的情况:var update = p.data(dataset); 数据刚好帮定的数据。text(d)->{ reuten d}var enter = update.enter(); 没有元素可以绑定的数组内容.append(p)原创 2017-09-12 16:53:37 · 529 阅读 · 0 评论 -
d3学习资料收集
1. 英文资料(1)官方 APIhttps://github.com/mbostock/d3/wiki/API-Reference阅读 API 学习是一个不坏的方法。虽然有不少人说 D3 的 API 写得太学术性了,不好懂,但是真要想得心应手地使用 D3,此 API 是避不开的。(2)Mike Bostock 的博客和作品展示板http://bost原创 2017-09-12 09:42:34 · 743 阅读 · 0 评论 -
【 D3.js 视频系列 】 飞速入门
本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章。本教程的名称为“飞速入门”,是为初学者准备的,其中包括了 D3 开发中最基础的知识。对 D3 掌握得较好的朋友不必观看本教程。本系列的具体内容如下,点击标题即可进入百度云页面观看。如果百度云网盘的在线播放中出现清晰度不足的情况,请下载后再观看。1. 第一个D3程序D3的转载 2017-09-12 09:27:56 · 726 阅读 · 0 评论 -
d3自定义树图备份
//全局设置同步$.ajaxSetup({ async: false }); var tree = CollapsibleTree("body"); tree.init("/sistem/getdata/drawing/roottree?entName="+comName+"&type="+getDataType); //回复异步$.ajaxSetu原创 2017-09-18 17:17:15 · 970 阅读 · 0 评论 -
大量 D3.js 示例
113th U.S. Congressional Districts20 years of the english premier football league20000 points in random motion2012 NFL Conference Champs2012-2013 NBA Salary Breakdown25 great circles2D Matrix Decompos转载 2017-09-07 10:38:20 · 17109 阅读 · 2 评论 -
【 D3.js 高级系列 — 10.0 】 思维导图
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状。在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”。因此,可以凭借这两种布局来制作思维导图。1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下。有转载 2017-09-06 14:39:44 · 495 阅读 · 0 评论 -
d3 力导向图
力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。力导向图能表示节点之间的多对多的关系。数据转载 2017-09-05 10:52:37 · 14598 阅读 · 3 评论 -
D3实现TREE树状图
[html] view plain copy print?html> head> meta charset="utf-8"> title>树状图title> style> .node circle { fill: #fff; stroke: steelblu转载 2017-08-22 15:50:17 · 5973 阅读 · 0 评论 -
D3.js学习笔记十五:D3.js树图(Tree)展开和折叠
构图(d3.layout)——树图(Tree)的展开和折叠树的基本操作就是展开和折叠,在D3里面,树的展开和折叠是通过设置树的子节点属性来实现的,tree.nodes(root)返回树的当前节点集合,通过操作这个集合,可以实现节点的动态变化。children - the array of child nodes, or null for leaf nodes.x - the转载 2017-08-22 15:25:28 · 16826 阅读 · 0 评论 -
d3.js力导向图节点间多连接线对称绘制
本文基于d3.js中的力导向图对关系网络进行可视化。针对实体之间多关系亦即节点之间多条连接线的问题,采用弧形连接线,同时对节点间的多条连接线进行动态编号,并根据编号绘制不同半径的弧线,从而解决多条弧形连接线相互遮挡的问题。同时基于svg中的path标签属性,对弧形方向进行调整,保证多条连接线在节点之间的分布具有对称效果。整体演示代码如下:[html] view转载 2017-10-11 10:30:59 · 5693 阅读 · 1 评论