用户投稿D3.js（Data-Driven Documents）是一个 JavaScript 的 Library，顾名思义是使用资料驱动文件，它可以操纵 DOM 元素，并让其做图像化的呈现，我们通常使用它来操控 SVG 元素以製作精美的图表，而其写法相当类似于 jQuery，直接使用 d3 这个物件的方法，之后以 . 进行串接，如下
d3.selectAll('p').text('我爱 How 哥，How 哥 No.1')// 执行后会将所有 p 元素内容改为 "我爱 How 哥，How 哥 No.1"安装可使用 npm 或是 CDN 的方式，我们为了方便就直接使用 CDN 啦~
<script src="https://d3js.org/d3.v5.min.js"></script>基本上 D3.js 主要可分为三个步骤，以下我们一一介绍
选取元素绑定资料绘製画面选取元素
选取元素常用的方法有两种，分别为单选与多选
select：选取单一选择器，类似 querySelectorselectAll：选取多个选择器，类似 querySelectorAll绑定资料与获取资料
这边常用的方法也分为两种，分别为单一资料或一组资料，若不带入参数可用于资料的获取，带入参数则用于资料的绑定
data：将元素依序绑定资料，通常一组资料（阵列）datum：将每一个元素绑定单一资料，通常单一资料（字串、数字等）範例 - datum
这边每一个 p 段落都被换成传入的参数了，并且可以看到绑定的资料皆相同
<body> <p>我是第一段文字</p> <p>我是第二段文字</p> <p>我是第三段文字</p> <p>我是第四段文字</p><script> const data = '我爱 How 哥，How 哥 No.1' d3.selectAll('p').datum(data).text(item => item) console.log(d3.selectAll('p').datum())</script></body>
範例 - data
这边会依序传入资料，若元素大于资料，后面的元素将不变动
<body> <p>我是第一段文字</p> <p>我是第二段文字</p> <p>我是第三段文字</p> <p>我是第四段文字</p><script> const data = ['我爱 How 哥', 'How 哥 No.1'] d3.selectAll('p').data(data).text(item => item) console.log(d3.selectAll('p').data())</script></body>
资料状态
资料绑定后分为三个状态，分别为 update、enter 跟 exit
update：预设选项，选取已更新资料的元素enter：资料 > 元素时使用，选取多出来的资料exit：元素 > 资料时使用，选取多余的元素範例 - enter
这边第一段与第二段文字有配对到资料，所以状态皆为 update，而多出来的资料，也就是 How 哥 与 No.1 的部分，他们状态皆为 enter，所以我们可以将其选取，并插入元素让资料可以显示于画面
<body> <p>我是第一段文字</p> <p>我是第二段文字</p><script> const data = ['我爱', 'How 哥', 'How 哥', 'No.1'] d3.selectAll('p').data(data).text(item => item) d3.select('body').selectAll('p').data(data).enter().append('p').text(item => item)</script></body>
範例 - exit
第一段与第二段文字有配对到资料，所以状态皆为 update，而第三段与第四段因为没有配对到资料，所以其状态为 exit，这时候我们就可以对其进行操作，将多余的资料删除
<body> <p>我是第一段文字</p> <p>我是第二段文字</p> <p>我是第三段文字</p> <p>我是第四段文字</p><script> const data = ['我爱 How 哥', 'How 哥 No.1'] d3.selectAll('p').data(data).text(item => item) d3.selectAll('p').data(data).exit().remove()</script></body>
绘製画面
知道资料状态后，接着只要对其做一些操作便可绘製完成图表，这边就实际的来做做看吧!
首先新增一个 html 的标籤与一些 css 的样式
<div class="chart"></div>.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white;}再来是就是 D3 的部分了，这边我们对选定的元素设定宽度与文字，这样基本的图表就完成了
let data = [30, 86, 168, 281, 303, 365]d3.select('.chart') .selectAll('div') .data(data) .enter() .append('div') .style('width', item => item + 'px') .text(item => item)
我们这边使用 div 来画图表，但 D3 的强项其实是使用 SVG 来绘製，但目前只是先了解如何使用而已，后续会再介绍更多操控 SVG 的方法，届时就可以做出许多炫砲的图表或效果啰!
微信扫一扫打赏
支付宝扫一扫打赏
