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

第 18 章 个人奖项可视化

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

在第 17 章中，您学习了 D3 的基础知识、如何选择和更改 DOM 元素、如何添加新元素以及如何应用数据更新模式，这是交互式 D3 旋转的轴心。在本章中，我将扩展您迄今为止所学到的知识，并向您展示如何构建一个相当新颖的可视化元素，按年份显示所有的诺贝尔奖（图 18-1）。这个诺贝尔奖时间轴将让我们扩展上一章的知识，展示一些新技术，包括更高级的数据操作。

图 18-1. 本章的目标图表--诺贝尔奖时间轴

让我们先来看看如何为时间轴图表构建 HTML 框架。

建立框架

我们的目标图表的结构与上一章详细介绍的诺贝尔奖条形图类似。 我们首先使用 D3 选择<div> 容器（ID：nobel-time ），然后使用容器的宽度和高度以及 和指定的边距创建svg 图表组：

import nbviz from './nbviz_core.mjs'

let chartHolder = d3.select('#nobel-time');

let margin = {top:20, right:20, bottom:30, left:40};
let boundingRect = chartHolder.node()
  .getBoundingClientRect();
let width = boundingRect.width - margin.left
- margin.right,
height = boundingRect.height - margin.top - margin.bottom;

let svg = chartHolder.append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top
        + margin.bottom)
        .append('g')
          .attr("transform",
                  "translate(" + margin.left + ","
                  + margin.top + ")");
    // ...
})

svg 图表组已就绪，让我们添加刻度和坐标轴。

天平

为了放置圆形指标，我们使用了两个序数刻度（例 18-1）。x 比例尺使用rangeRoundBands 方法在圆之间指定 10%的填充。 由于我们使用 x 比例来设置圆形的直径，因此需要手动调整 y 比例范围的高度，以容纳所有的指示器，并在指示器之间留出一点间距。我们使用 将像素坐标四舍五入为整数。rangeRoundPoints

例 18-1. 图表中 x 轴和 y 轴的两个序数带刻度

let xScale = d3.scaleBand()
  .range([0, width])
  .padding(0.1) 
  .domain(d3.range(1901, 2015))

let yScale = d3