D3.js

终于来到了本章代码量最为密集的最后一个小节了。

作者真的是事无巨细真正把大家当成零基础的数据可视化爱好者竟然细致到

的注释是怎么加的也要说明一下……不过这也算是本书的一大魅力吧。

也多亏了这份执着和对细节把控的精益求精新版才出现了这么多直观精美的配图。

由于篇幅太长本节最后的人物专访就放到下篇本文为上篇主要介绍条形图的最终实现。

一起跟随作者实战起来吧

3.5

示例条形图就快做完了但目前还不知道哪个矩形条对应哪个技术也不知道矩形条的长度代表哪些票数。

这些问题只要给图表加两组标签label就能解决第一组列出技术名称放在左侧第二组则显示各矩形条对应的

count

文本元素text实现先将各矩形条分别与两个文本元素相结合然后将其一同嵌入

SVG

分组元素的知识这里可以用分组元素将多个子元素视为一个整体进行平移以便于后续将绑定数据传递给它的后代元素。

接下来需要稍微重构一下代码。

首先注释掉与矩形条元素相关的所有代码行留待后用。

在

JavaScript

的分组元素g上而不是之前的矩形条上。

然后将该选择集赋给一个常量

barAndLabel

svg.selectAll(g).data(data).join(g);为了让矩形条与标签元素同步移动可以利用

transform

0以及垂直平移量这里设为各矩形条的垂直坐标由之前定义好的分段比例尺函数

yScale

svg.selectAll(g).data(data).join(g).attr(transform,

translate(0,

的分组元素没有可视化的图形表示也不以占据某个有界空间的形式存在但我们仍然可以将其想象成能够封装所有子元素的内容盒。

借助

transform

所示。

各矩形条及其标签元素将相对于它们所在的父级分组元素进行定位

3.30

svg.selectAll(g).data(data).join(g).attr(transform,

translate(0,

${yScale(d.technology)}));barAndLabel.append(rect);由于该选择集包含多个分组元素D3

会分别给每个分组添加一个矩形元素。

保存项目并使用检查工具进行查看确认它们都已经添加到了

DOM

数据绑定的一大好处是绑定的数据会传递给分组内的所有后代元素。

因此矩形条依然可以像之前那样拿到数据唯一的区别是矩形的

属性要设为

barAndLabel.append(rect).attr(width,

100).attr(y,

矩形不用再做垂直平移其定位相对于其父级分组元素的位置.attr(fill,

d.technology

yellowgreen:skyblue);这时就能看到各个矩形条了效果和之前完全相同详见图

3.28

文本元素分别添加进去。

由于各标签需要展示每个对应的技术名称因此需要再链式调用一次

text()

方法。

该方法只接受一个参数文本元素要显示的文本内容。

本例则需要根据每个绑定的数据项动态设置对应的文本内容

barAndLabel.append(text).text(d

属性给每个标签定位。

先来看水平方向各标签末端要同矩形条的起始位置对齐。

矩形条从

100px

再来看垂直方向。

由于各标签的定位相对于所在的父级分组元素只需稍向下平移即可与矩形条居中对齐。

注意SVG

文本元素的垂直定位是相对于它的基线baseline而言的。

经反复试错与微调最终给定的

像素。

位置的微调可以在浏览器的检查工具inspector里快速实现

barAndLabel.append(text).text(d

96).attr(y,

barAndLabel.append(text).text(d

96).attr(y,

接着再在矩形条的另一端添加一组标签显示该技术在问卷调查中的得票数做法与添加技术名称标签类似。

先调用

barAndLabel

选择集常量然后在每个分组元素内添加一个文本元素再通过链式调用的

text()

barAndLabel.append(text).text(d

d.count)由于计数标签位于矩形条的末端而矩形条的水平坐标可以通过

xScale

barAndLabel.append(text).text(d

d.count).attr(x,

小一些目的是为了让两组标签保持视觉上的层次感。

较大的标签更吸引眼球也便于让观众理解得票数是次于技术名称的样式设计。

barAndLabel.append(text).text(d

d.count).attr(x,

9px);最后一步再在条形图左侧绘制一条垂直线作为垂直方向的轴线。

在以下代码片段中我们将这条线段添加到

SVG

进行访问。

值得一提的是本章给标签预留间距的做法并不常用。

业内更通用的实现方案是遵守

外边距约定D3

convention具体内容将在下一章进行介绍后续章节也将按这种写法来进行讲解。

3.35

恭喜您完成了本章的学习——知识点着实很密集如果还没有掌握讲过的所有概念也不必过于担心。

后续章节还将继续提到这些概念相信很快就能融会贯通

11px