d3.js入门——selection与创建条形图

28次阅读

共计 2200 个字符，预计需要花费 6 分钟才能阅读完成。

入门 d3.js，根据官网部分教程学习，发现因为版本更新，有些 api 和概念可能不适用，但总体思想未变。本文思路跟随此篇 blogLet’s Make a Bar Chart 学习，加上自己的理解，并且查阅了部分更新资料
元素选择
d3 通过 d3.select() 或者 d3.selectAll() 获取元素，这两个 API 返回 selection 对象，我们可以通过 selection 对象操控元素
<div class=”chart”></div>
<div class=”chart”></div>
<div class=”chart”></div>
<div class=”chart”></div>
<div class=”chart”></div>
<script>
console.log(d3.select(‘.chart’));
console.log(d3.selectAll(‘.chart’));
</script>
通过 selection 操作 dom 有一个好处是可以不用写太多的 for 循环，比如我想给所有的 chart DIV 添加内容只需
let section = d3.selectAll(‘.chart’);
let div = section.append(‘div’);
div.html(‘Hi!’)
就可以向所有的 div 加入内容，无需 for 循环
链式写法
selection 的另一个方便之处就是链式写法，selection 的方法会返回对应 selection，这样就可以使用简洁的链式写法了
d3.selectAll(‘.chart’)
.append(‘div’)
.html(‘Hi’)
使用 html 与 d3 创建条形图
首先列出 css 与 data，下面都用这一配置
.chart div{
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<div class=”chart”></div>
const data = [4, 8, 15, 16, 23, 42];
接下来使用 d3 创建条形图
d3.select(‘.chart’)
.selectAll(‘div’)
.data(data)
.enter().append(‘div’)
.style(‘width’, d => d * 10 + ‘px’)
.text(d => d)
接下来分步说明，其中会涉及到一个叫 data join（数据绑定）的概念。有了 data join，当数据发生改变时，可以通过数据创建，更新，销毁元素，后文再提及首先获取元素并初始化要绑定数据的元素
let chart = d3.select(‘.chart’)// 选择元素
let bar = chart.selectAll(‘div’) // 要进行数据绑定的元素，chart 中无此元素，此时返回的 selection 为空
接着绑定数据
let barUpdate = bar.data(data)
console.log(barUpdate)
selection.data() 方法会将数据绑定于选择的元素之中，并返回一个新的 selection，并且在其中定义了 enter selections 和 exit selections

（这部分用文字难以一言两语解释清楚，于是写在另一篇 blog 里）enter selections：表示有数据无元素，对应元素用 EnterNode 替代，若对应数据有元素，则由 empty 表示 exit selections: 表示无数据有元素，因为 chart 中没有元素，所以这里的数组为空；若有数据对应元素，元素也用 empty 表示，无则用元素本身表示 _groups: 表示成功绑定上数据的元素，若无对应元素，则由 empty 表示，所以这里有 6 个 empty
接下来我们获取所有 EnterNode，对齐插入 div
let barEnter = barUpdate.enter().append(‘div’); //enter() 返回 EnterNode
接着对这些 div 设置条形宽度，因为有 data join（数据绑定），所以我们直接通过绑定的数据设置宽度就可以了
barEnter.style(“width”, d => d * 10 + ‘px’);
最后，text 文字设置同理
barEnter.text(d => d);
使用比例尺
上面的例子中我们使用了 magic number => 10，让 bar 的像素宽度 = 数值 *10，使得 bar 的宽度看起来容易对比，但是正常情况下使用 magic number 会很麻烦且不易调试，而且不仅有放大像素数值的情况，也有缩小像素数值的情况，所以引入了比例尺这里使用线性比例尺
let x = d3.scaleLinear()
.domain([0, d3.max(data)]) //
.range([0, 420]); //
d3.select(‘.chart’)
.selectAll(‘div’)
.data(data)
.enter().append(‘div’)
.style(‘width’, d => x(d) + ‘px’) // 使用比例尺，比例尺是个函数
.text(d => d);