D3.js

Posted 2020-09-21

D3.js：
D3.js是一个基于数据操作文档的javascript库，它通过使用html，SVG和CSS，给数据带来了生的形式。D3强调的是在web标准上无需给出你自己专用的框架，就能在现代浏览器上给出健全的性能，联合了强大的数据可视化成分和数据驱动方法对于DOM操作

1.Introduction
D3允许绑定任意的数据到DOM上，并且请求数据驱动转换到文档上，例如，你可以从一列数中通过使用D3去生成HTML表格，或者，使用同样的数据去创造一个交互式的有平滑转移和交互作用的SVG条状图。
D3不是一个庞大的寻找去提供每个可能特点框架，而是解决了关键的难题：即基于数据有效的文档操作，它避免了专一的陈述和负担起了奇特的灵活性。暴露了这个web标准的健全性能比如HTML，SVG和CSS，凭借极小的管理。D3是极度的快，支持大数据集，交互作用和动画的动态行为。D3的功能风格允许代码通过多种多样的官方收集和社区发展模块重用
D3提供了诸多方法变化节点，设置属性和风格，注册事件监听，增加，移除和排序节点，并且改变HTML或者文本内容。

2.Dynamic Properties
读者熟悉其他的DOM框架比如jQuery应该能立即辨认D3的相似性，包括风格，属性和其他的特征可以被具体化为在D3中的数据函数，不仅仅是简单的常量，尽管它的简洁性显而易见，这些函数是令人惊奇的强大，D3的geoPath函数，例如，突出geographic coordinate(地理坐标)进入SVG路径数据，D3提供了很多内置的重用的函数和函数工厂，比如关于区域的graphical primitive(地理原始)线图和饼图。
例如：随机颜色段落：
` 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将检索这个先前绑定的数据，这允许你重计算没有绑定的属性。

3.Enter and Exit
使用D3的进入退出选项，你可以对输入数据和移除不需要的输出数据创造新节点。
当数据被绑定到一个选项中，在这一列数据中的每一个元素都被成对的绑定到这个选项中的相应节点时，如果有比数据更少的节点，这个额外是数据元素你可以添加到这个输入选项实例化，例如
`d3.select("body")
.selectAll("p")
.data([4,8,16,23,42])
.enter()
.append("p")
.text(function(d){
return "i‘m" number "+d+"!";
});`
更新节点是默认选项-数据操作的结果，因此，如果你忘记这个进入和退出选项，你将自动的选择这些与数据相符合的存在元素，通常是打破这个初始选项进入这三个部分，更新修改，补充节点，移除已经存在节点。

更新：
`var p=d3.select("body")
.selectAll("p")
‘data([4,8,16,23,42])
.text(function(d){return d;});`

进入
`p.enter().append("p")
.text(function(d){return d;});`

退出：
p.exit().remove();

4转移
D3集中于自然的从转换扩展到动画的转移，转移随着时间逐渐的插入样式和属性，这二者之间可以通过缓慢函数如“elastic"控制， ”cubic-in-out" 和 “linear”，D3的插入也支持原生函数，如数和数的嵌入以字符，复合值，你甚至可以扩展D3的插入注册支持复杂的属性和数据结构

例如：变换这个背景到黑色
`d3.select("body")
.transition()
.style("background-color","black");`

或者，在一个字符图中重定圆的大小以一个合适的延迟
`d3.selectAll("circle").transition()
.duration(750)
.delay(function(d){return i*10;})
.attr("r",function(d){
return Math.sqrt(d*scale);};`
通过修改这仅有的实际变化的属性，D3减轻花费和允许生成大的图形复杂度在一个高框架率，D3也允许通过事件序列化这个复杂转移，并且，你可以使用CSS3转移，D3不替代这个浏览器工具盒，但是以一种方式曝光了它的简单易用。