javascript图形库---d3

1       D3简介

D3.js是一个用来操作基于数据的文档的javascript库，D3能够帮助你使用html,svg和css来呈现数据。D3重视web标准，同时给予你现代浏览器的所有功能，因此，你无须去适应一个专有的框架，同时整合了强大的可视化部件和一个基于数据驱动的方法去操作DOM对象。

D3允许你绑定任意的数据到一个DOM对象中，然后绑定一些数据驱动的事务在这个文档上，例如，你可以用d3从一个数组中生成html的table.或者，使用同样的数据去制造一些具有过渡或交互的效果的动态svn的表格。

D3并不单单是一个提供所有可能想象的特性的框架。取而代之的是，d3解决的的问题是：如果基于数据有效地操作文档。这能够避免一些特有的呈现方式和提供额外的扩展性，同时也能够充分地利用网络的标准，例如css2,html5和svg.这是有了这些极小的开销，d3是很快的，而且支持大数据集合和交互，动画的动态行为。D3的函数风格允许通过不同的部件和插件实现代码重用。

 

2       选择器

用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”,”white”,null);

}

D3采用了一种声明式的方法，对于任意集合的操作都称为选择器。例如，你可以重写前面的循环如下：

Ds.selectAll(“p”).style(“color”,”white”);

当然，你也可以根据你的需要，操作单独的节点。

 

选择器是根据w3c选择器的api定义的，本地的浏览器对于它是绝对支持的，d3提供了许多方法让我们可以操作节点：例如设置节点的style属性，注册时间监听器，添加，移除或

排序节点，改变html或者文本的内容。这些就能够满足大部分的需求了。

 

动态特性

熟悉jquery和prototype框架的人，应该能够立刻了解到d3和他们之间的相似性。样式，属性和其他的属性都是被特定为函数的数据而不是简单的常量。尽管他们显然是相似的，但是这些函数确实异常强大的。

例如，要随机画图。

D3.selectAll(“p”).style(“color”,function(){

       Return “hsl(”+Math.random()*360+”,100%,50%”;

});

 

改变奇数或偶数节点的形状

D3.selectAll(“p”).style(“color”,function(d,i){

       Return i%2?”fff”:”#eee”;

});
计算属性经常被指为是绑定数据。数据可以是一些特定的数组，然后每个值就被传为被选择函数的第一个参数。默认是按照下表来连接的，在数据数组中的第一个元素就被传到选择器中作为第一个节点，依次类推。例如，如果你要绑定一些数据到一些段落元素，你可以用这些元素去动态计算字体大小。

d.selectAll(“p”).data([3,2,3,3]).style(“font-size”,function(d){

       return d+”px’;

});

一旦数据绑定到这个文档上面，你就可以提交这些数据操作。D3会检索先前绑定好的数据。这就允许你在未重新绑定的情况下重新计算属性值。

 

3       进入和退出

使用d3的进入和退出选择器，你可以为新数据建立新节点和移除哪些不在需要的节点。

当数据被绑定在选择器的时候，每一个在数组中的额数据就被选择器中的特定节点多绑定，如果节点的数量少于数据，那么，额外的数据节点就会形成这个进入选择器，你可以通过附上这个进入选择器的方式初始化它。例如：

D3.select(“body”).selectAll(“p”).data([2,3,3,2]).enter().append(“p”).text(funtciont(d){

              Return “number ”+d+”node”;

})

更新节点是默认的选择器。因此，如果没有添加进入或退出选择器，你就只能选择那些存在的，已经有绑定节点的数据。一个通用的模式就是把这个初始化的选择器分成三个部分：

跟新修改的节点，添加新进入的节点，还有移除存在的节点。

 

/更新

Var p = d3.select(“body”).selectAll(“p”).data([2,2,1]).text(String);

//进入

p.enter().append(“p”).text(String);

 

//退出

p.exit().remove();

 

为了能够分别地处理这些场景，你必须准确地特定说哪个操作必须作用于哪些节点。

这个能够极大地提高性能和提供在过渡效果方面的控制。例如，在一个表格中你可能会用一些旧的数据初始化这个bar,当有新数据的时候，你仅仅是更新这些存在的数据。

D3能够然你基于数据去转换文档，这包括了创建和销毁节点。D3允许你根据用户的操作，动画和第三方的的异步提醒来更新存在的文档。一个dom可以再服务器端初始化和渲染，在客户端通过D3更新。

 

4        Transformation, not Representation

D3 is not a new graphical representation. Unlike , , or , the vocabulary of marks comes directly from web standards: HTML, SVG and CSS. For example, you can create SVG elements using D3 and style them with external stylesheets. You can use composite filter effects, dashed strokes and clipping. If browser vendors introduce new features tomorrow, you’ll be able to use them immediately—no toolkit update required. And, if you decide in the future to use a toolkit other than D3, you can take your knowledge of standards with you!

Best of all, D3 is easy to debug using the browser’s built-in element inspector: the nodes that you manipulate with D3 are exactly those that the browser understands natively.

5       过渡

D3专注于转换，扩展动画过渡的效果。逐步过渡插入的样式和属性。D3的内插器支持原始类型和复合类型。你甚至可以继承d3的内插器用以支持复杂的属性和数据结构。

 

例如，渐变效果可以是这样的

d3.select("body").transition()

    .style("background-color", "black");

或者，在一个图标地图中，间断地改变圆圈的大小

d3.selectAll("circle").transition()

    .duration(750)

    .delay(function(d, i) { return i * 10; })

    .attr("r", function(d) { return Math.sqrt(d * scale); });

只是通过改变那些确实改变的属性，d3减少了开销和允许在高帧速度下能够绘制复杂的图形。D3允许通过事件实现一系列复杂的渐变。你依旧可以使用css3的渐变；d3并不会取代浏览器的工具箱，只是让它更加好用。