D3.js是一个JavaScript的函数库，主要用来做数据可视化。
本节内容介绍了选择集、动态属性、enter、exit、update操作和过渡。选择集描述如何选中想要操作的节点；动态属性控制选中节点元素的属性；enter、exit、update分别来添加节点、移除节点、更新节点；过渡用来制作动画效果。
下载最新版本（4.11.0）在这里：
也可直接链接，拷贝下面片段：
<script src="https://d3js.org/d3.v4.min.js"></script>
D3教程：点击这里
Selections
D3可以选择某一种标签的所有节点进行批量操作，也可以根据需要选择单独的节点进行操作。当使用JavaScrip对某一种标签节点操作时需要进行迭代操作，而使用D3可以批量操作，减少代码冗余。
选择所有节点进行操作：
d3.selectAll("p").style("color", "white");
选择单独节点进行操作：
d3.select("body").style("background-color", "black");
以上示例是按照标签名来选择节点元素（“p”和“body”），还可以按照attribute value、class、id等选择节点元素。与jQuery相似，使用#匹配id，.匹配class......
Dynamic Properties
样式、属性可以被指定为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";
});
数据可以动态绑定到节点元素中。数据被指定为一个数组，每个元素作为一个参数传递到函数中，默认情况下是按索引逐个元素进行传递，数组中的第一个元素被传递给第一个节点，第二个元素被传递给第二个节点，以此类推。
例如，将数字数组绑定到段落元素，段落字体大小按数组中这些数字来依次显示：
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
Enter and Exit
使用enter和exit函数，分别可以为传入的数据创建新的节点和去除多余的节点。
当数组绑定到节点时，数组中的元素逐个与选中的节点进行绑定。如果节点数量少于数组元素数量时，会创建新节点绑定多出的数据。如果节点数量多于数组元素数量时，会移除末尾多出的节点。enter之后一般使用append来进行节点元素的实际创建，exit之后一般使用remove来移除多出的节点。
例：
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
更新节点元素。不会创建新的节点。
// 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();
Transitions
D3支持动画效果，这种动画效果可以通过对样式属性的过渡实现。其补间插值支持多种方式，比如线性、弹性等。
d3-transition详解：点击这里
这里介绍四个函数。
transition()
启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）。
duration()
指定过渡的持续时间，单位为毫秒。
ease()
指定过渡的方式，常用的有：
- linear：普通的线性变化
- circle：慢慢地到达变换的最终状态
- elastic：带有弹跳的到达最终状态
- bounce：在最终状态处弹跳几次
delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
例，背景色过渡到黑色，1秒后开始过渡，过渡时长为1秒：
d3.select("body").transition()
.delay(1000)
.duration(1000)
.style("background-color", "black");
更多内容：Github个人博客
备注：本文发表于 https://cnyangkui.github.io/2017/10/11/d3core.html
网友评论