标签归档：d3js

RSS feed of d3js

使用D3js绘制Force-Directed Graph（力导向图）
作者是 发布于 在 JavaScript.

Force-directed（力导向）图形绘制算法通过图形本身的结构（图中顶点与边的拓扑关系）计算出图形的层次，而不依赖于特定领域的知识。使用力导向算法绘制的平面图形通常比较美观，并且图中各条边之间的交叉尽可能的少。

本文对使用D3js绘制Foorce-Directed Graph（力导向图）的过程进行简要的介绍，以下面的逻辑图（包含6个节点和5条边）为例。

import json
#nodes为图的节点集合
nodes = [{'name' : 'nodeA'}, 
         {'name' : 'nodeB'}, 
         {'name' : 'nodeC'}, 
         {'name' : 'nodeD'}, 
         {'name' : 'nodeE'}, 
         {'name' : 'nodeF'}]
#links为图的边集合，source为起点，target为终点
links = [{'source' : 0 , 'target' : 1}, 
         {'source' : 0 , ...

继续阅读

D3js简介
作者是 发布于 在 译林.

D3.js是一个基于数据的文档操控JavaScript库。使用HTML，SVG和CSS，D3能够帮你让数据活起来。D3所强调的Web标准帮助开发者在无需捆绑任何专有框架的前提下，结合强大的可视化组件及其数据驱动的DOM操纵方法，充分利用现代浏览器的全部功能。

点此下载最新版本（3.4.1）：d3.v3.zip

或者，复制这段代码直接链接最新版本：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

使用HTTPS的站点可能需要自行保留D3的源文件，或者使用一个支持HTTPS的CDN，比如CDNJS。全部源文件和测试用例也可以在GitHub中下载得到。

简介：

D3允许开发者将任意数据绑定在文档对象模型（DOM）之上，然后再应用数据驱动转换到文档中。例如，你可以使用D3从一个数组生成一个HTML表格。或者使用同样的数据来创建一个带有平滑过渡和互动功能的交互式SVG柱状图。

D3并非一个旨在涵盖所有功能特征的整体框架，相反，D3解决的问题核心是：基于数据的高效文档操作。这避免了局限的数据展现，提供了非凡的灵活性，体现出诸如CSS3，HTML5和SVG等Web标准的全部功能。使用最小的开销，D3的速度非常快，支持大型数据集以及交互与动画的动态行为。D3的函数风格允许通过各种组件和插件的形式进行代码的重用。

选择

使用W3C DOM API修改文档时十分繁琐的：方法名冗长，并且必须使用的方法需要人工迭代和对临时状态的维护。例如，要改变段落元素的文本颜色：


var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", ...

继续阅读