当前内容地点位置：
- 第一部门 D3.js 底子知识
- 第一章 D3.js 简介（已完结）
- 1.1 作甚 D3.js？
- 1.2 D3 生态体系——入门须知
- 1.3 数据可视化最佳实践（上）
- 1.3 数据可视化最佳实践（下）
- 1.4 本章小结
- 第二章 DOM 的操纵方法（已完结）
- 2.1 第一个 D3 可视化图表
- 2.2 环境预备
- 2.3 用 D3 选中页面元素
- 2.4 向选择集添加元素
- 2.5 用 D3 设置与修改元素属性
- 2.6 用 D3 设置与修改元素样式
- 2.7 本章小结
- 第三章 数据的处置惩罚 ✔️
- 3.1 明白数据
- 3.2 预备数据
- 3.3 将数据绑定到 DOM 元素 ✔️
- 3.3.1 利用数据给 DOM 属性动态赋值 ✔️
- 3.4 让数据顺应屏幕（精译中 ⏳）
- 3.5 加注图表标签
- 3.6 本章小结
《D3.js in Action》全新第三版封面
译者按
上一节我们学习了 D3 举行数据加载、格式化处置惩罚、必要的指标丈量等具体方法，最后得到一个符合可视化项目需要的尺度数据集（以对象数组的情势）。然后将该对象传入一个专门用于实现可视化效果的自界说函数 createViz 中。本节就来看看 createViz 是怎样一步步实现我们想要演示的条形图的。
3.3 将数据绑定到 DOM 元素 Binding data to DOM elements
接下来学习 D3 最冲动民气的一个焦点知识点：数据绑定。数据绑定能将数据（即单个数据项）与 DOM 元素关联起来。比方我们的条形图示例，其中的每个 rect 元素，都与问卷结果中的某项技术的投票总数相关联。
图 3.15 D3 数据工作流第四步：创建可视化 DOM 元素并实现数据绑定
绑定命据需要按照以下代码的格式来书写。该写法由 选择集 链式调用的三个 D3 接口方法（selectAll()、data() 与 join()）构成。
- selection
- .selectAll("selector")
- .data(myData)
- .join("element to add");
回到 main.js 文件，在函数 createViz() 内部创建一个与页面 SVG 容器相对应的 D3 选择集，并赋给常量 svg。该选择集就是后续添加矩形元素的容器。接着链式调用 selectAll() 方法，并传入一个待新增的元素标签名，即 "rect"。selectAll() 方法可以接受恣意 CSS 选择器作为参数，元素的标签名称每每是最常用的：
- const createViz = (data) => {
- svg
- .selectAll("rect")
- };
- svg
- .selectAll("rect")
- .data(data)
- svg
- .selectAll("rect")
- .data(data)
- .join("rect")
图 3.16 完成数据绑定并添加到页面 DOM 结构中的矩形元素截图
整个数据绑定的详细过程如图 3.17 所示。从选择集开始，这里就是 SVG 容器；然后调用 selectAll() 方法创建一个空选择集，传入我们的标签选择器；接着再调用 data() 方法；最后通过 D3 的 join() 方法给每个数据项添加一个对应的矩形元素。完成数据绑定的选择集实现了元素与数据的特定 组合（combination）。后续每当复用该选择会集的元素，或者对其实行某些 DOM 操纵，都能直接访问到元素对应的数据。
图 3.17 数据绑定过程示意图
数据绑定的另一种写法
如果上网搜索 D3 的代码示例，想必会碰到下面这样的写法。这是 D3 数据绑定的另一种写法，与本节先容的略有不同。其中链式调用的方法为 .enter().append()，而不是 join()：
- selection
- .selectAll("selector")
- .data(myData)
- .enter().append("element type");
本书将在第 7 章《交互式可视化》中详细先容这种更精良复杂的数据绑定模式。此刻您只需要知道，D3 的早期版本在绑定命据的写法上，和本节先容的版本略有不同即可。这些历史版本的代码今后大概率可能还将继续发挥余热，被您碰到。
3.3.1 利用数据给 DOM 属性动态赋值 Setting DOM attributes dynamically with data
之前讲过，D3 会将加载的 CSV 文件转换成一个可迭代的对象数组结构。利用这个数据结构，就能将其中的每个对象绑定到对应的矩形元素上。这些被绑定的数据不仅控制着新增矩形元素的个数，还可以在实行元素操纵时供访问器函数（accessor functions）及其他内置函数直接访问。
下面结合本章的条形图示例来举行演示。在刚才的数据绑定代码后面，再次链式调用一个 attr() 方法，目的是给每个矩形元素指定一个 class 属性（attribute）。但这里传入第二个参数的不是简朴的属性值，而是一个访问器函数，如下列代码所示。
可以看到，这里的访问器函数与其他 JavaScript 函数没什么不同。它返回一个样式类的值，也就是代码中的 bar，或者任何需要赋给矩形元素的有用类名：
- svg
- .selectAll("rect")
- .data(data)
- .join("rect") .attr("class", d => { console.log(d); return `bar bar-${d.technology}`; })
关于模板字面量与连接字符串
上面的代码片段（译注：即倒数第 2 行）使用了 模板字面量（template literals），也称为 模板字符串（template strings），用反引号（``）举行引用。它用于将传统的 JavaScript 字符串与表达式相结合。其中，表达式以一个美元符号 $ 开头，并用大括号包起来，如 ${表达式}：
模板字面量与连接字符串对比
将表达式与字符串组合在一起，您可能更容易想到连接字符串，固然这种写法老套了点，但也没什么问题。如上图所示，在连接字符串中，字符串的双方使用了引号（""），而表达式的连接则用的是加号（+）。其实两种写法都可以，但模板字面量正在成为新主流。
绑定命据的这种访问机制，对于矩形位置和大小的设置而言十分有利。条形图最终要实现如图 3.18 所示的垂直堆叠效果：每个矩形宽（width 属性）表示选用该工具的从业者数量，对应绑定命据的 count 值；矩形越长，选用该技术的人就越多，反之亦然。另一方面，矩形的高（height 属性）则是固定的，而且在垂直方向上相互留有肯定间隙。
图 3.18 找出每个矩形左上角位置的通用公式
若将柱形的高度值赋给常量 barHeight，则可以用下面的代码来设置矩形的宽高。注意属性 width 的设置，过细观察回调函数的用法以及获取绑定命据的 count 值的实现过程：
- const barHeight = 20;svg
- .selectAll("rect")
- .data(data)
- .join("rect") .attr("class", d => { console.log(d); return "bar"; }) .attr("width", d => d.count) .attr("height", barHeight)
与此同时，y 属性的值则需要算一算了——
第 1 个矩形条的左上角位于 SVG 容器的顶部，此时 y 值为 0；
第 2 个矩形位于第 1 个的正下方，与上一个矩形的左上角相距一个单位的柱形高度，外加一部门间距（切记，SVG 元素的 y 坐标是向下为正）；
第 3 个矩形的位置还要低一些，其 y 坐标的值为两个柱形高度，外加两倍的垂直间距。
如图 3.18 所示，可以观察出 y 值满意的某种规律。任一矩形的 y 值，应该即是在它之前的矩形数，乘以条形高度与垂直间距的和。
这样，在 y 属性的回调函数中，需要用到第二个循环参数，通常定名为 i，表示 索引（index）。前面先容过，使用访问器函数就像在循环遍历被绑元素的数据。在 JavaScript 的循环语法中，通常可以访问到每个当前元素的索引，即它们在循环数组中的位置再减 1（JavaScript 中的数组索引是从 0 开始的）。入一下代码片段所示，利用索引来计算每个矩形元素的垂直位置，并相互预留出 5px 的间隙：
- const barHeight = 20;svg
- .selectAll("rect")
- .data(data)
- .join("rect") .attr("class", d => { console.log(d); return "bar"; }) .attr("width", d => d.count) .attr("height", barHeight) .attr("x", 0) .attr("y", (d, i) => (barHeight + 5) * i)
图 3.19 箭头函数的用法示意图
保存并重新加载项目，会看到如图 3.20 所示的矩形顺次分列。终于看着有点像条形图了！
图 3.20 利用数据对各矩形举行定位并调解其大小后的渲染效果
提示
下一节将先容分段比例尺（band scales）在计算条形元素垂直位置时的具体用法。但是像本节这样手动计算各矩形元素位置的做法也很有意义。开辟 D3 项目时经常需要举行这样的元素定位计算，因此熟悉这类任务是很有必要的。刚开始接触可能不太轻松，但加以时日训练，就能彻底掌握其中的要领。应对这些计算的最佳方法之一，是将可视化中的其中几个元素画在一张纸上，然后找出它们在 SVG 父级坐标系中的位置坐标，如上图 3.18 所示。这项训练能资助您更好地明白可视化项目的构建过程，尤其是处置惩罚复杂项目的时间。
接下来，需要设置矩形元素的 fill 属性来给上面的条形图上色，让画面看起来更美观。以下代码段使用了 CSS 内置的天蓝色 skyblue。固然也可以填充您喜好的恣意颜色：
- svg
- .selectAll("rect")
- .data(data)
- .join("rect") ... .attr("fill", "skyblue");
- ...
- .attr("fill", d => d.technology === "D3.js" ? "yellowgreen" : "skyblue");
图 3.21 给 D3.js 对应的条形元素填充绿色，其余则填充蓝色
这样，示例中的条形图就初步成型了。目前每个矩形的宽度都是直接用的数据自己的值，这种做法可能并不太实用。想象一下：要是数据中的数值是以百万为单位，难道也像这样对应到矩形宽度上吗？下一节将先容比例尺相关的知识，看看它们在 D3 项目中是怎样处置惩罚数据值与视觉属性之间的对应关系的。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 | 
