概要 实例 介绍 源码

大数据可视化

D3.js 是一个基于大数据可视化的JavaScript库。 D3帮助您使用HTML、SVG和CSS为数据带来生命。D3强调Web标准,使您能够充分利用现代浏览器的功能,而不必绑定到专有框架,将强大的可视化组件和数据驱动的方法结合到DOM操作中。

下载最新的版本(V4.9.1)点击这里:

若要直接链接到最新版本,请复制此地址:

<script src="http://d3js.cn/libs/v4.9.1/d3.min.js"></script>

你也可以从GitHub下载完整的源码及测试.通过购买官方贴纸来展示你对D3的持续发展的支持!

#介绍

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

D3 采用声明式方法,在任意一组节点上操作选择。 例如, 您可以重写上面的循环:

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

然而,您仍然可以根据需要操作单个节点:

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)传递给选择函数。通过索引的默认连接,将数据数组中的第一个元素传递给选择中的第一个节点、第二个元素到第二个节点,等等。例如,如果将数字数组绑定到段落元素,可以使用这些数字计算动态字体大小:

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

数据已绑定到文档后,可以省略数据运算符;D3将检索以前绑定的数据 。这允许您重新计算性能没有绑定。

#Enter和Exit

使用D3的EnterExit选项,可以为传入数据创建新节点,并删除不再需要的传出节点。

当数据绑定到一个选择时,数据数组中的每个元素都与选择中的对应节点配对。如果节点比数据少,则额外的数据元素构成输入选择,您可以通过添加到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运算符的结果。因此,如果您忘记了enter和exit选项,您将自动选择只有相应数据的元素。一个常见的模式是将初始选择分成三个部分:要修改的更新节点、要添加的输入节点和要删除的退出节点。

// 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();

通过分别处理这三种情况,可以精确地指定哪些操作在哪个节点上运行。这提高了性能并提供了对转换的更大控制。例如,在条形图中,您可以使用旧的比例初始化输入条,然后随着更新和退出bar进入新的刻度。

D3允许您基于数据转换文档;这包括创建和销毁元素。D3允许您根据用户交互、时间动画、甚至第三方的异步通知来更改现有文档。混合方法甚至是可能的,文档最初是在服务器上呈现的,并且通过D3在客户端上更新。

#转换,而非表示

D3没有引入新的视觉表示。不同的 处理Protovis,D3的词汇的图形标志是直接从Web标准的HTML和CSS,SVG,。例如,您可以创建使用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不更换浏览器的工具箱,但暴露了它的方式,更容易使用。

想学更多吗? 阅读这些教程