使用 Python 和 JavaScript 进行数据可视化，第二版

第 17 章 介绍 D3--柱形图的故事

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在第 16 章中，我们通过将诺贝尔奖可视化分解成组件元素，想象出了我们的诺贝尔奖可视化。在本章中，我将通过向你展示如何构建我们所需的条形图（图 17-1），轻轻地向你介绍 D3。

图 17-1. 本章的目标柱形图

D3 不仅仅是一个图表库。除其他功能外，它还是一个用于构建图表库的库。那么，我为什么要通过条形图这种超常规的可视化方式向你介绍 D3 呢？首先，因为第一次从零开始制作柱形图，完全控制图表的外观和感觉，不受特定图表库的偏见限制，应该会有点小激动。其次，这也是学习 D3 基本元素的好方法，尤其是数据连接和进入-退出-移除更新模式，现在 D3 的新方法join 很好地封装了这些元素。 如果你掌握了这些基本要素，你就能充分发挥 D3 的强大功能和表现力，制作出比条形图更新颖的图表。

我们将使用第 4 章中涉及的一些 Webdev，尤其是 D3 擅长的 SVG 图形（参见"可扩展矢量图形"）。你可以使用在线编辑器（如CodePen或VizHub，其中也有大量精心制作的数据展示示例）试用代码片段。

在开始绘制柱形图之前，我们先来了解一下柱形图的要素。

确定问题的框架

条形图有三个关键组件：坐标轴、图例和标签，当然还有条形图。由于我们制作的是一个现代化的交互式条形图组件，我们需要坐标轴和条形图根据用户交互进行转换，即通过顶部选择器过滤获奖者集（见图 15-1）。

我们将一步一步地构建图表，最后使用 D3 过渡，这可以让您的 D3 作品更吸引人、更有魅力。 但首先我们将介绍 D3 的基础知识：

• 在网页中选择 DOM 元素

• 获取和设置它们的属性、特性和样式

• 追加和插入 DOM 元素

在掌握了这些基础知识后，我们将开始体验数据绑定的乐趣，D3 也将在这里大显身手。

使用选件

选择是 D3 的支柱。通过使用类似 jQuery 的 CSS 选择器，D3 可以选择和操作单个或分组 DOM 元素。 所有 D3 链式操作都从使用 和 方法选择 DOM 元素或元素集开始。 返回第一个匹配元素； 返回匹配元素集。select selectAll select selectAll

图 17-2显示了使用select 和selectAll 方法进行 D3 选择的示例。这些选择用于更改一个或多个条形图的height 属性。select 方法返回第一个rect （IDbarL ）和类bar ，而 selectAll可以根据所提供的查询返回rect的任意组合。

图 17-2. 选择元素并更改属性：使用初始 HTML 构建了三个矩形。然后进行选择并调整一个或多个条形的高度属性。

除了设置属性（DOM 元素上的命名字符串；如id 或class ），D3 还允许您设置元素的 CSS 样式、属性（如是否选中复选框）、文本和 HTML。

图 17-3显示了使用 D3 更改 DOM 元素的所有方法。通过这几种方法，您可以实现几乎任何您想要的外观和感觉。 ...