D3.js总体展示篇

浏览数：61 / 时间：2015年06月09日

最近一段时间研究社会成员网络关系图的一些可视化展示，对大数据可视化这篇荒漠一筹莫展的自己，幸好发现了D3这片充满活力的绿洲，我决定在这块宝地贪婪地大餐一番。

本文介绍主要来自官网翻译及用户使用后感想资料收集

D3.js是一个对数据（主要针对大数据）进行操纵使之实现可视化的JavaScript库。

D3能够借助HTML、SVG和CSS等技术将数据展示出来。通俗点，就是网页制图，生成互动图。

介绍D3的中文书籍现在只有《数据可视化实战-使用D3设计交互式图表》，有兴趣大家可以看看

优点：

与其他js实现制图的方式不同，D3是一个对数据的操作的API.它将数据和网页SVG绑在了一起，当你的数据发生变化时，图表会同步更新。比如一个数据数组和SVG柱状图中相应y坐标绑定，如果这个数组的元素设为随机变量，定时变化，那么你看到的柱状图也会是不断变化的动态图效果。除此之外，他可以接受海量数据的可视化显示和动态更新。

D3可以高效操作大数据文档（大多为json格式），支持大数据集的动态交互和动画效果。D3的设计风格允许使用代码重复，在借助不同的插件或组件的情况下。

在github上你可以找到很多例子，D3的灵活性，它的随意绑定数据和元素，以及漂亮的可动性效果展示一定会让你大吃一惊。

使用：

D3的使用，需要引入d3.v3.min.js 或d3.js，你可以到github下载最新的D3 js压缩版本，也可以通过http链接方式在网页中引入D3

关键代码如下：

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

代码里的路径也可以换成你下载d3后的本地路径。

下面通过对比传统的js写法，对其代码语法用法做大体介绍：

Selections(选中对象)

传统写法 document获取对象改变并设置其颜色，这么大一坨代码。。。。

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实现上面效果

d3.selectAll("p").style("color", "white");

对，你没有看错，就是这么简单。
当然，在有必要时，你也可以拿出单个对象对其设置，代码如下：

d3.select("body").style("background-color", "black");

dynamic（动态属性）

熟悉DOM框架如jQuery或Prototype的朋友们会很快意识到他们与D3的相似之处。然而,在D3中样式、属性和其他属性都可以设定为函数的可变数据,而不仅仅是简单的常量。尽管他们十分的简单性,这些函数可是出奇的强大。

下面边举例子边说明，还是上面的name是p标签的对象操作，现在要让他们随机改变颜色：

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";  
});

接下来讲讲他对数据的绑定 ，上文function传的d值，就是绑定的数据量引用

计算属性常常引用绑定数据。数据被指定为一个数组的值,每个值作为第一个参数传递(d)选择功能。使用默认join-by-index,数据数组中的第一个元素传递给第一个节点的选择,第二个元素到第二个节点,等等。例如,如果您绑定的数组数据段元素,您可以使用这些数据来计算动态字体大小:

d3.selectAll("p")  
    .data([4, 8, 15, 16, 23, 42])  
    .style("font-size", function(d) { return d + "px"; });

也可把数组单另拿出来

var data = [4, 8, 15, 16, 23, 42, 12];

d3.selectAll("p")  
    .data(data)  
    .style("font-size", function(d) { return d + "px"; });

另外，如果数据量很大，需要加载文件，下面提供几种加载数据文件的方式：

XML加载

d3.xml('example', 'image/svg+xml', function (error, data) {
    if (error) {
        console.log('加载SVG文件出错！', error);
    }
    else {
        // 处理SVG文件
    }
});

json加载

d3.json("miserables.json", function(error, graph) {  }

文件可以不加后缀名。

上面的代码主要介绍选中对象的属性设置操作，下面，让我们整体看下对象的设置、添加和删除都是怎么做到的

var p = d3.select("body").selectAll("p")  
    .data([4, 8, 15, 16, 23, 42])  
    .text(String);  
  
// Enter…  
p.enter().append("p")  
    .text(String);  
  
// Exit…  
p.exit().remove();

在语法上，采用链式写法，对某对象的操作都可以用"."来连接。

基本格式就谈到这里，后文会介绍如何具体使用D3来展示我们想看到的数据效果，如何实现对数据的聚类显示、节点间如何实现网络关系连接、节点属性数据如何显示、各类图形绘制、地图信息如何绘制部署节点等内容敬请期待