D3.js 是什么？
D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库。 D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来。 D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。
介绍
D3允许您将任意数据绑定到文档对象模型 (DOM)，然后将数据驱动的转换应用于文档。例如，您可以使用 D3 从数字数组生成 HTML 表格。或者，使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。
D3 不是一个单一的框架，它试图提供所有可以想象的功能。相反，D3 解决了问题的症结所在：基于数据高效操作文档。这避免了专有表示并提供了非凡的灵活性，暴露了 Web 标准（如 HTML、SVG 和 CSS）的全部功能。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", "blue", null);
}D3 采用声明式方法，对称为selections 的任意节点集进行操作。例如，您可以将上述循环重写为：
d3.selectAll("p").style("color", "blue");但是，您仍然可以根据需要操作单个节点：
d3.select("body").style("background-color", "black");选择器由W3C 选择器 API定义，并由现代浏览器原生支持。上面的示例通过标签名称（分别为"p"和"body"）选择节点。可以使用各种谓词来选择元素，包括包含、属性值、类和 ID。
D3 提供了许多改变节点的方法：设置属性或样式；注册事件监听器；添加、删除或排序节点；并更改 HTML 或文本内容。这些足以满足绝大多数需求。直接访问底层 DOM 也是可能的，因为每个 D3 选择只是一个节点数组。
动态属性
熟悉其他 DOM 框架（如jQuery）的读者应该立即认识到与 D3 的相似之处。然而，样式、属性和其他属性可以指定为D3中数据的函数，而不仅仅是简单的常量。尽管表面上看起来很简单，但这些功能却非常强大。的d3.geoPath功能，例如，突出的地理坐标到SVG路径数据。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)传递给选择函数。使用默认的 join-by-index，数据数组中的第一个元素传递给选择中的第一个节点，第二个元素传递给第二个节点，依此类推。例如，如果将一组数字绑定到段落元素，则可以使用这些数字来计算动态字体大小：
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });一旦数据绑定到文档，就可以省略data操作符；D3 将检索先前绑定的数据。这允许您重新计算属性而无需重新绑定。
进入和退出
使用 D3 的进入和退出选择，您可以为传入数据创建新节点并删除不再需要的传出节点。
当数据绑定到选择时，数据数组中的每个元素都与选择中的相应节点配对。如果节点数少于数据，则额外的数据元素形成输入选择，您可以通过附加到enter选择来实例化。例如：
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });更新节点是默认选择——data操作符的结果。因此，如果您忘记了进入和退出选择，您将自动仅选择存在相应数据的元素。一种常见的模式是将初始选择分为三部分：要修改的更新节点、要添加的进入节点和要删除的退出节点。
// Update…
var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();通过分别处理这三种情况，您可以准确指定在哪些节点上运行哪些操作。这提高了性能并提供了对转换的更好控制。例如，对于条形图，您可以使用旧比例初始化输入柱，然后将输入柱过渡到新比例以及更新和退出柱。
D3 允许您根据数据转换文档；这包括创建和销毁元素。D3 允许您更改现有文档以响应用户交互、随时间推移的动画甚至来自第三方的异步通知。混合方法甚至是可能的，其中文档最初在服务器上呈现，然后通过 D3 在客户端上更新。
转化，而不是再现
D3 没有引入新的视觉表示。与Processing或Protovis不同，D3 的图形标记词汇直接来自 Web 标准：HTML、SVG 和 CSS。例如，您可以使用 D3 创建 SVG 元素并使用外部样式表对其进行样式设置。您可以使用复合滤镜效果、虚线笔触和剪裁。如果浏览器供应商明天推出新功能，您将能够立即使用它们——无需工具包更新。而且，如果您决定将来使用 D3 以外的工具包，您可以随身携带您的标准知识！
最重要的是，使用浏览器的内置元素检查器可以轻松调试 D3：您使用 D3 操作的节点正是浏览器本机理解的节点。
过渡
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 不会取代浏览器的工具箱，而是以更易于使用的方式公开它。
