v2ex wordpress,海口网站优化,gta5线下买房网站建设,优秀的网页当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介#xff08;已完结#xff09; 1.1 何为 D3.js#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践#xff08;上#xff09;1.3 数据可… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一部分 D3.js 基础知识 第一章 D3.js 简介已完结 1.1 何为 D3.js1.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.4.1 比例尺简介上篇3.4.2 线性比例尺中篇 3.4.2.1 基于 Mocha 测试 D3 线性比例尺DIY 实战 3.4.3 分段比例尺下篇 3.4.3.1 使用 Observable 在线绘制 D3 条形图DIY 实战 3.5 加注图表标签上篇 ✔️ 3.5.1 人物专访Krisztina Szűcs下篇待翻译 ⏳ 3.6 本章小结 文章目录 3.5 加注图表标签 Adding labels to a chart 《D3.js in Action》全新第三版封面 译者按 终于来到了本章代码量最为密集的最后一个小节了。作者真的是事无巨细真正把大家当成零基础的数据可视化爱好者竟然细致到 JS 的注释是怎么加的也要说明一下……不过这也算是本书的一大魅力吧。也多亏了这份执着和对细节把控的精益求精新版才出现了这么多直观精美的配图。由于篇幅太长本节最后的人物专访就放到下篇本文为上篇主要介绍条形图的最终实现。一起跟随作者实战起来吧 3.5 加注图表标签 Adding labels to a chart
示例条形图就快做完了但目前还不知道哪个矩形条对应哪个技术也不知道矩形条的长度代表哪些票数。这些问题只要给图表加两组标签label就能解决第一组列出技术名称放在左侧第二组则显示各矩形条对应的 count 票数值分别放到各矩形条的最右端。
在基于 SVG 的可视化项目中标签的制作可以通过 SVG 文本元素text实现先将各矩形条分别与两个文本元素相结合然后将其一同嵌入 SVG 的某个分组元素group内。根据第 1 章 1.2.2 节介绍的 SVG 分组元素的知识这里可以用分组元素将多个子元素视为一个整体进行平移以便于后续将绑定数据传递给它的后代元素。
接下来需要稍微重构一下代码。首先注释掉与矩形条元素相关的所有代码行留待后用。在 JavaScript 中单行注释以双斜杠//开头而多行注释则以 /* 开始、以 */ 结束。
再回到处理数据绑定的那部分代码。此时应该让数据绑定到 SVG 的分组元素g上而不是之前的矩形条上。然后将该选择集赋给一个常量 barAndLabel
const barAndLabel svg.selectAll(g).data(data).join(g);为了让矩形条与标签元素同步移动可以利用 transform 属性让各分组元素做垂直平移vertical translation。transform 变换属性attribute上的 translate 平移属性property接受两个参数水平平移量设为 0以及垂直平移量这里设为各矩形条的垂直坐标由之前定义好的分段比例尺函数 yScale 计算得到
const barAndLabel svg.selectAll(g).data(data).join(g).attr(transform, d translate(0, ${yScale(d.technology)}));虽然 SVG 的分组元素没有可视化的图形表示也不以占据某个有界空间的形式存在但我们仍然可以将其想象成能够封装所有子元素的内容盒。借助 transform 属性这些分组元素实现了垂直方向的均匀排布如图 3.30 所示。各矩形条及其标签元素将相对于它们所在的父级分组元素进行定位 【图 3.30 封装了矩形条与标签等后代元素的分组元素在 SVG 容器内的定位情况】
一切就绪后就可以重新添加矩形条了。如下所示调用选择集 barAndLabel并将矩形元素添加进去
const barAndLabel svg.selectAll(g).data(data).join(g).attr(transform, d translate(0, ${yScale(d.technology)}));barAndLabel.append(rect);由于该选择集包含多个分组元素D3 会分别给每个分组添加一个矩形元素。保存项目并使用检查工具进行查看确认它们都已经添加到了 DOM 结构中如图 3.31 所示 【图 3.31 添加到每个分组元素里的矩形元素示意图】
现在可以取消刚才的注释把它们用到新加的 rect 元素上。D3 数据绑定的一大好处是绑定的数据会传递给分组内的所有后代元素。因此矩形条依然可以像之前那样拿到数据唯一的区别是矩形的 y 属性要设为 0因为分组元素已经带着它完成了垂直平移
barAndLabel.append(rect).attr(width, d xScale(d.count)).attr(height, yScale.bandwidth()).attr(x, 100).attr(y, 0) // 矩形不用再做垂直平移其定位相对于其父级分组元素的位置.attr(fill, d d.technology D3.js ? yellowgreen:skyblue);这时就能看到各个矩形条了效果和之前完全相同详见图 3.28。 译注 为方便查看新的条形图效果我这里直接附上图 3.28 接下来能可以正式添加标签了再次调用选择集 barAndLabel将 SVG 文本元素分别添加进去。由于各标签需要展示每个对应的技术名称因此需要再链式调用一次 text() 方法。该方法只接受一个参数文本元素要显示的文本内容。本例则需要根据每个绑定的数据项动态设置对应的文本内容
barAndLabel.append(text).text(d d.technology);内容设置好后再用 x 和 y 属性给每个标签定位。先来看水平方向各标签末端要同矩形条的起始位置对齐。矩形条从 100px 开始于是可以把文本元素放在大约 96px 的位置与矩形条保持 4px 的间距。然后令其 text-anchor 属性attribute的值为 end实现标签右对齐。这样 x 属性值就代表了各标签的末端位置如图 3.32 所示 【图 3.32 各技术标签的定位计算示意图】
再来看垂直方向。由于各标签的定位相对于所在的父级分组元素只需稍向下平移即可与矩形条居中对齐。注意SVG 文本元素的垂直定位是相对于它的基线baseline而言的。经反复试错与微调最终给定的 y 值为 12 像素。位置的微调可以在浏览器的检查工具inspector里快速实现
barAndLabel.append(text).text(d d.technology).attr(x, 96).attr(y, 12).attr(text-anchor, end);最后在根据各自的喜好调用 style() 方法设置文本标签的 font-family 与 font-size 属性分别确定字体及字号。本例使用的字体为 11 号无衬线字体如图 3.33 所示
barAndLabel.append(text).text(d d.technology).attr(x, 96).attr(y, 12).attr(text-anchor, end).style(font-family, sans-serif).style(font-size, 11px);【图 3.33 加注了技术标签的条形图效果】
接着再在矩形条的另一端添加一组标签显示该技术在问卷调查中的得票数做法与添加技术名称标签类似。先调用 barAndLabel 选择集常量然后在每个分组元素内添加一个文本元素再通过链式调用的 text() 方法给每项技术指定相应的 count 值
barAndLabel.append(text).text(d d.count)由于计数标签位于矩形条的末端而矩形条的水平坐标可以通过 xScale 函数计算得到。再加上矩形条两边的间距左边为预留的 100px后边同样保持 4px 间隔这样技术标签的 x 属性就能确定了。垂直方向也令其下移 12px如图 3.34 所示
barAndLabel.append(text).text(d d.count).attr(x, d 100 xScale(d.count) 4).attr(y, 12)【图 3.34 计数标签的定位计算示意图】
接着再给技术标签设置 font-family 和 font-size 属性。注意计数标签的字号为 9px比技术名称的字号 11px 小一些目的是为了让两组标签保持视觉上的层次感。较大的标签更吸引眼球也便于让观众理解得票数是次于技术名称的样式设计。
barAndLabel.append(text).text(d d.count).attr(x, d 100 xScale(d.count) 4).attr(y, 12).style(font-family, sans-serif).style(font-size, 9px);最后一步再在条形图左侧绘制一条垂直线作为垂直方向的轴线。在以下代码片段中我们将这条线段添加到 SVG 容器内。该线段的起点坐标 (x1, y1) 为 (100, 0)即 SVG 容器的顶部终点坐标 (x2, y2) 则位于 (100, 700)即容器底部。再指定好线条的描边色让轴线显示出来
svg.append(line).attr(x1, 100).attr(y1, 0).attr(x2, 100).attr(y2, 700).attr(stroke, black);如果再把 SVG 容器的边框去掉最终条形图的效果就应该如图 3.35 所示。该项目也托管到了 GitHub 可以访问 http://mng.bz/mjor 进行访问。值得一提的是本章给标签预留间距的做法并不常用。业内更通用的实现方案是遵守 D3 外边距约定D3 margin convention具体内容将在下一章进行介绍后续章节也将按这种写法来进行讲解。 【图 3.35 最终实现的在线版 D3 条形图效果详见http://mng.bz/mjor】
恭喜您完成了本章的学习——知识点着实很密集如果还没有掌握讲过的所有概念也不必过于担心。后续章节还将继续提到这些概念相信很快就能融会贯通 。 译注 实测时发现左边标签的字号取 11px 时部分标签显示不全调整为 10px 正常。相应的得票数标签也最好该小些设为 8px 比较合适相关源码已同步上传到 CSDN 下载资源 【补图 1 本地实测并重新调整字号后的 D3 条形图效果】
