D3.js入门

时间 2019-11-09

原文原文链接

D3.js是一个经过数据来操做文档JavaScript库。结合SVG，D3特别适合用于图表的绘制，但D3自己并非一个图表库，它把数据绑定到DOM中，利用SVG输出图表。本文所讲内容适用于v4.0+版本javascript

从v4.0开始，D3把各个模块分离开来，各个模块相互独立，也就是说若是你只须要用到D3强大的数组操做部分，只需引用d3-array部分(例如npm install d3-array)，不须要引用全部的D3库。这样作可以使前端模块化开发更加灵活，减少引用资源体积，节省性能html

用D3操做DOM元素

d3.select(selector) 返回匹配选择器的第一个元素
d3.selectAll(selector) 返回匹配选择器全部元素

好比d3.selectAll(‘p’)能够选择全部的p元素，d3.select(‘p’)只选择第一个p元素前端

d3.select('p')
d3.selectAll('p')
复制代码

还能够选择其余经常使用的选择器，包括派生选择器，与document.querySelector和document.querySelectorAll方法十分相似java

d3.select('.chart')
d3.selectAll('.chart')
d3.select('#chart')
d3.select('.chart rect')
复制代码

selection.append(type) 建立新元素并返回该元素
selection.remove() 从DOM中移除当前元素
selection.attr(name[,value]) 取得或设置属性的值
selection.style(name[,value[,priority]]) 取得或设置元素的样式

d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500)
  .style('background', 'red')
  .remove()
复制代码

上面的代码首先在body中建立了一个svg标签，而后给它设置高度和宽度，设置背景色，最后被删除，D3的代码风格基本采用链式写法，由于大部分D3的方法都返回D3对象的实例，这和jQuery很是类似npm

在DOM元素中绑定数据

数据绑定是D3的最大特点，也是最让入门者困惑的地方，D3中文全称“数据驱动文档”，主要的方法有两个数组

selection.datum([value]) 为每一个元素绑定值value

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var p = d3.select('body').selectAll('p'); // 为p元素集绑定数值1 p.datum(1); console.log(p); </script>
</body>
复制代码

运行代码查看控制台，数值1已经被赋予了p标签的**data**属性了app

selection.data([data[,key]]) 为每一个元素分别绑定对应data中数据值

data方法与datum方法的区别在于，data的参数是数组，分别分配给对应的DOM元素，每一个DOM元素获得一个value值，而datum把相同参数均赋值给DOM元素，每一个元素获得的数据值相同，data方法比较适用于平常数据需求，使用更多svg

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 为p元素集绑定数组dataset p.data(dataset); console.log(p); </script>
</body>
复制代码

运行代码查看控制台，数值一、二、3分别绑定到了第一、二、3个p标签模块化

绑定数据后，就能够利用绑定的数据作一些事情了，D3为大部分操做DOM的方法添加了函数参数，该函数有两个参数，一个表明绑定的数据，一般为d，另外一个为序数值，一般为i函数

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 更改p元素内的内容,d是数据值，i是序数值 p.data(dataset) .text(function(d, i) { return d + ' ' + i }); </script>
</body>
复制代码

运行结果以下图：

enter()与exit()的用法

在前面讲数据绑定中，数组的长度与标签数量是相等的，若是数据的长度不可控，会致使有些标签没有数据，有些数据没有标签匹配，这个时候就要用到enter与exit方法了

selection.enter() 为缺失的元素返回占位符

<body>
  <p>Dog</p>
  <script type="text/javascript"> var dataset = [1, 2, 3]; var p = d3.select('body').selectAll('p'); // 目前只有1个元素，3个数据值 enter = p.data(dataset).enter(); console.log(enter); </script>
</body>
复制代码

查看控制台，发现出现了2个并不真实存在的EnterNode，绑定了剩余的数据，这就是enter部分，若是后面继续添加新的标签，标签会被自动绑定剩余数据

selection.exit() 返回没有被绑定数据的元素

<body>
  <p>Dog</p>
  <p>Cat</p>
  <p>Monkey</p>
  <script type="text/javascript"> var dataset = [1]; var p = d3.select('body').selectAll('p'); // 目前有3个元素，只有1个数据值 exit = p.data(dataset).exit(); console.log(exit); </script>
</body>
复制代码

查看控制台，有2个标签并无绑定数据，这就是exit部分，能够把多余的exit部分移除掉

交互与动画

selection.on(typenames[,listener[,capture]])

D3的事件绑定很是简单，与jQuery的on方法同样，指定事件类型后，调用回调函数

<body>
  <p>Dog</p>
  <script type="text/javascript"> var p = d3.select('body').select('p'); p.on('click', function() { d3.select(this).text('Cat'); }) </script>
</body>
复制代码

selection.transition([name])

在元素之间加入transition方法，就能造成炫酷的过渡动画

<body>
  <div></div>
  <script type="text/javascript"> var div = d3.select('body').select('div'); div.style('width', '200px') .style('height', '200px') .style('background', 'red') .transition() .style('width', '400px'); </script>
</body>
复制代码

1. d3.js 入门指南
2. D3.js入门指南
3. D3.js从入门指南
4. D3.js 入门系列3
5. D3.js 入门学习(一)
6. D3.js从入门到“放弃”指南
7. d3.js 入门指南 - 仪表盘
8. 【译】D3入门
9. D3入门
10. d3.layout.force()---入门篇
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用