石家庄智能模板建站,网站备案被拒绝,网站内文章外链如何做,郑州做网站公司汉狮网当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介#xff08;已完结#xff09; 1.1 何为 D3.js#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践#xff08;上#xff09;1.3 数据可视化最佳实践#xff08;下#xff09;1.4 本章小结 第二章… 当前内容所在位置 第一部分 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 本章小结 ✔️ 2.6 用 D3 设置与修改元素样式
为了让可视化元素拥有想要的外观和感觉需要为其设置样式。使用传统的 CSS 样式表就是一种不错的方案通常也是考虑后期可维护性时的优先方案。但有时直接使用 D3 来设置与修改样式属性同样很方便尤其是在样式随数据动态变化的时候。
D3 通过 selection.style() 方法设置与修改元素的样式属性attribute。该方法需要两个参数样式属性的名称及其属性值如图 2.16 所示 图 2.16 style() 方法
回到条形图示例在 main.js 中在 SVG 容器选择集上链式调用 style() 方法即赋值到常量 svg 上的方法。如以下代码所示使用 style() 方法为 SVG 容器应用边框样式可以赋值为任何想要的属性值。本例中使用简写样式设置一个宽度 1px 的黑色边框
const svg d3.select(.responsive-svg-container).append(svg).attr(viewBox, 0 0 1200 1600).style(border, 1px solid black);SVG 容器四周的边框有助于直观了解当前所处的空间区域并理解 style() 方法的工作原理。
保存项目并在浏览器中查看效果。从 DOM 检查工具中找到 SVG 容器可以看到 border 属性property被添加到了 style 属性attribute中如图 2.17 所示。也就是说 style() 方法注入了所谓的行内样式。 图 2.17 使用 style() 方法生效的边框样式
在处理 SVG 元素时有些样式可以通过 attribute 属性或行内样式来生效例如 fill 和 stroke 属性properties。至于应该使用 attr() 还是 style() 方法来设置样式并没有严格的规定但一些开发人员更愿意保持一致始终使用 CSS 样式表样式或行内样式来设置样式而不是通过元素的 attribute 属性。这也许是一个不错的做法尤其是在我们希望分开创建形状的代码与设置外观的代码、使得层叠样式更易于管理的时候。本书将使用 attr() 和 style() 方法以及外部 CSS 文件来设置 SVG 元素的视觉属性。
例如在 main.js 中在矩形选择集上调用 style() 方法并对该矩形设置与之前不同的填充色 plum如以下代码所示
svg.append(rect).attr(x, 10).attr(y, 10).attr(width, 414).attr(height, 16).attr(fill, turquoise).style(fill, plum);然后打开 main.css 文件为该矩形添加第三个 fill 属性property令其颜色值为 orange
rect {fill: orange;
}此时该矩形拥有三种不同的填充样式一个是通过元素 attribute 属性设置的青绿色 turquoise一个是通过行内样式应用设置的深紫色 plum最后是通过外部 CSS 样式设置的橙黄色 orange。当然实际工作不会这样设置本例仅供演示。
保存项目注意观察借助 style 属性设置的 fill 样式是如何覆盖另两种样式的。在图 2.18 中您可以看到样式中的层叠规则是如何生效的行内样式覆盖了其余样式其次是外部 CSS 样式表设置的样式最后是通过 attribute 属性设置的 fill 样式。牢记这一规则将有助于制定适合自己习惯、团队和项目的策略同时也可以在遇到下面的问题时摆脱百思不得其解的窘境为什么这种样式在屏幕上可见、而另一种偏偏就不可见呢 图 2.18 填充样式 fill 同时在 attribute 属性、外部样式表及行内样式应用的效果对比
至此我们已经知道如何获取选择集、如何在 DOM 中添加元素、以及如何给这些元素设置方位与样式。但是真要像示例这样逐一添加条形图的各个矩形条效率肯定高不了。等下一章学了数据绑定的相关知识后就能一次性添加所有的矩形条了。在此之前需要删除 main.js 和 main.css 中与矩形相关的代码让 main.js 文件只包含如下所示的代码。第三章将从这里开始构建条形图
代码清单 2.2 本章结束时 main.js 的代码内容
const svg d3.select(.responsive-svg-container).append(svg).attr(viewBox, 0 0 1200 1600).style(border, 1px solid black);人物专访纳迪埃·布雷默Nadieh Bremer 纳迪埃·布雷默 是一位数据可视化艺术家。 【问】能否介绍一下您的背景以及您是如何进入数据可视化领域的 【Nadieh】 我毕业时是一名天文学家之后开始从事数据科学方面的工作。然而几年后我意识到自己缺少了工作中富有创意的一面。当我看到别人称他们自己为“数据可视化专家”时我立刻意识到这正是我可以兼顾的地方在调查数据、探寻故事、玩转数学的同时发挥自己的创造力。 【问】在没有 Web 开发背景的情况下是什么促使您学习 D3遇到的主要挑战是什么又是如何克服的呢 【Nadieh】 我参加了一次 D3.js 研讨会2013 年会上人们展示了包括交互在内的 D3 的各种可能性。尤其是在当时我从未见过这样的新事物我知道自己也想创建出这样的交互式数据可视化效果。于是便买了一本斯科特·穆雷Scott Murray写的书《网络交互式数据可视化》Interactive Data Visualization for the WebO’Reilly2017 年并从那本书开始了 D3 的学习。当时面临的主要挑战是HTML / CSS / JavaScript 对我来说都是全新的尽管我知道如何用 R 语言编程。因此除了 D3 外我还必须学习这些语言而且由于我的无知我都不知道 D3 的独特之处在哪儿什么又叫原生 JavaScriptvanilla JavaScript以致于常常会被卡在一些细枝末节上不知道如何从网上搜索答案。总的来说凭借极致的毅力并确信当时所从事的是自己真正热衷的项目才让我最终坚持了下来。不知不觉地我对这些知识的理解也越来越透彻。我花了整整一年的时间才理解了 D3 的“进入-更新-退出”enter-update-exit流程哈哈。 【问】除了 D3您还使用其他可视化工具吗D3 在您当前的数据可视化工作流程中处于什么位置我看到您在项目中经常用到 R 语言。 【Nadieh】 D3 确实是我的主要工具。我 90% 的数据可视化项目都会在开始制作最终视觉效果时加载 D3。此外我还会使用 JavaScript 和其他一些库如用于处理颜色的 Chroma.js 以及用于处理噪声函数noise functions的 SimplexNoise。我总是先用 R 语言进行数据分析和数据准备创建大量简单的图表以便对这些数据产生独到而深入的理解。但我从不把这些图表作为最终的视觉效果。 Nadieh 精品项目《太空大战》www.visualcinnamon.com/portfolio/space-wars/ 发表在《科学美国人》杂志的纳迪埃·布雷默的作品《太空卫星的可视化效果》Visualization of satellites in space) 【问】再来聊聊您为 2020 年 11 月版的《科学美国人》创作的《太空大战》这部作品吧 【Nadieh】 《太空大战》可视化展示了当时仍在太空中活动的所有卫星情况主要目的是为了显示谁拥有这些卫星、以及可以在哪些轨道上找到它们。通过将每颗卫星视为单独的小圆圈再按国家和轨道进行分组可以非常直观地展示卫星本身的详细情况如重量、年限、所属分类等等。 【问】能再介绍一下这个项目的创作过程吗 【Nadieh】 幸好数据是由一位卫星专家收集的所以我不需要做任何数据处理只需要进行一些数据分析就能了解我所掌握的情况。我在一个小册子上记录了一些想法。我知道要在国家和轨道分类上做文章。不过关于每颗卫星的元数据实在太多只能分别展示每颗卫星。也不知道从哪里冒出来的想法但在某个时刻我绘制了一幅用圆圈表示卫星的树形地图。当最初的想法逐渐明晰起来后剩下的工作就分成了两个部分一个是技术部分——如何在树形地图中使用圆圈另一个是如何让整体设计看起来更美观。一开始效果看起来很糟糕但后来我花了一些时间从最喜欢的科幻电影中寻找色彩灵感才找到真正想要的视觉效果。 【问】在外人看来您似乎是将 D3 的树形图的绘制手法与力导向图的布局相结合来生成这种可视化效果的是这样吗将不同模块的方法有机结合来创建前所未见的布局效果这也是我最喜欢 D3 的原因之一。看了您在 Skillshare 平台的主讲课程《数据可视化通过自定义图表获得美感与影响力》Data Visualization: Customizing Charts for Beauty Impact里面也建议大家组合不同类型的图表。 【Nadieh】 没错就是这样。我利用树形地图的方法来获取每组卫星的预定区域用 x、y 坐标和宽度、高度来描述。然后在每个矩形区域内用力导向图的布局来进行模拟以便对所有的圆进行定位确保它们不会相互重叠。想要知道树状地图的每个方框的合理大小需要用每个圆的表面积与卫星重量成比例与一个转换系数相加有时还需要手动定义一些“神秘数值”译注magic number意指程序中出现的没有任何注解或标明出处的数字要么这儿改改要么那儿调调。 你说得很对能够创造性地使用 D3 也是我最喜欢它的原因之一 代表卫星的圆圈根据树状地图中的控制区域和轨道类型分组再利用 D3 的力导向布局计算它们的确切位置 【问】关于用 D3 为纸媒等印刷媒介生成静态可视化作品您能再分享一下这方面的看法吗我认为我们在这类问题上的讨论还远远不够 【Nadieh】 我喜欢创建静态视觉效果在创作过程中我也几乎一直在用 D3.js。对于印刷版视觉效果的创作有一点很重要那就是或许应该用 SVG 来完成创作而不是使用 HTML5 的 canvas 画布。这样杂志编辑们拿在手里的就是一个可以自由缩放大小的矢量文件。此外字体和标题这些内容也可以进行调整比如更换字体和润色比如修改文案措辞。如果将浏览器中的视觉效果带入矢量编辑器那么绝大部分样式都会被复制过来我发现 Illustrator 在复制 CSS 样式与设置方面做得最好。 【问】您与 Shirley Wu 合作完成的项目和《数据草图》一书Data Sketches由 A K Peters 出版社于 2021 年出版启发了我们中的许多人让我们在数据的处理方面更有创造力。您对初涉该领域的新人有什么建议吗 【Nadieh】 听到这本书能带给大家启发和灵感我感到无比欣慰。回想起来还有些奇怪当初我和 Shirley 开始编著《数据草图》时曾一度以为它可能是个只有我们和一些亲密的朋友才会去欣赏的愚蠢项目silly project呢。 至于建议主要有两方面。一个是创作to create。尽可能多地去创作可视化作品。每创作一个新的作品你都会学到新的东西有时甚至是在不知不觉中遇到新的问题或陷阱pitfalls要想出新的独具创意的解决方案来克服它们。当我回顾自己在这条道路上的旅程以及沿途创作的可视化作品时都会清楚地看到自己是如何在编码和创意方面变得更加自信。这些经历和收获又进一步对我的创作产生积极的影响。 第二个建议是尝试钻研你真正感兴趣的数据和主题即便这些数据不是现成的而是需要手工收集的。对自己真正感兴趣的主题进行数据分析即使遇到技术上或设计上的困难也会更容易坚持下去。这一点你也可以在《数据草图》一书中得到印证。在数据方面我们从来不去选那条好走的路而是一直尝试让兴趣来引导我们。几乎在所有情况下数据都会不知不觉地出现在某个地方。 2.7 本章小结
D3 项目要有一个 Web 服务器才能正常运行。利用 VS Code 的 Live Server 扩展可以简单快速地在本地开发环境中搭建一个 Web 服务器。有两种方法将 D3 库加载到项目中一是在 index.html 中添加 script 标签二是使用 NPM 模块引入 D3 库。为简单起见本书前几章使用 script 标签的方法。D3 既可以完整加载整个库也可以按需加载必要的 D3 模块从而提高项目性能。通过 script 标记加载文件和库时script 标签生效的顺序与浏览器读取脚本的顺序相同。也就是说引入 D3 的 script 标签必须放到使用 D3 的 JavaScript 文件所对应的 script 标签前面。否则浏览器将无法访问 JavaScript 文件中的 D3 方法而导致报错。D3 使用 d3.select() 和 d3.selectAll() 方法从 DOM 中选择元素。前者只返回第一个元素而后者返回与其选择器匹配的所有 DOM 元素。作为参数传给 select() 和 selectAll() 方法的字符串选择器与 CSS 中的选择器相同均使用标签名、类名、ID 或这些名称的组合来标识 DOM 元素。append() 方法可以将新增元素添加为该选择集的最后一个子元素。attr() 方法用于添加或修改元素的 attribute 属性。它接受两个参数属性名称与属性值。style() 方法可以设置和修改 DOM 元素的 style 属性attribute也需要传两个参数样式的 property 属性名与属性值。style() 方法可以设置行内样式并覆盖通过外部 CSS 样式表及 attribute 视觉属性设置的样式。
