标签：
近期一段时间研究社会成员网络关系图的一些可视化展示，对大数据可视化这片荒漠一筹莫展的自己，幸好发现了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");熟悉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来展示我们想看到的数据效果。怎样实现对数据的聚类显示、节点间怎样实现网络关系连接、节点属性数据怎样显示、各类图形绘制、地图信息怎样绘制部署节点等内容敬请期待
标签：
原文地址：http://www.cnblogs.com/gcczhongduan/p/5179483.html
