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

附录 A. D3 的输入/输出模式

如"使用数据更新 DOM "中所示，D3 现在有了一种更方便用户使用的join 方法，以取代使用基于enter 、exit 和remove 方法的模式实现数据连接的旧方法。 join 方法是对 D3 的一大补充，但网上有成千上万使用旧数据连接模式的示例。要使用/转换这些示例，需要对 D3 连接数据时引擎盖下发生的事情有更多了解。

为了演示 D3 的数据连接，让我们来看看 D3 连接数据时的引擎盖。让我们从 SVG 画布和图表组到位的无条形图开始：

...
    <div id="nobel-bar">
      <svg width="600" height="400">
        <g class="chart" transform="translate(40, 20)"></g>
      </svg>
    </div>
...

要使用 D3 连接数据，我们首先需要一些正确形式的数据。一般来说，这将是一个对象数组，比如我们的条形图nobelData ：

var nobelData = [
    {key:'United States', value:336},
    {key:'United Kingdom', value:98},
    {key:'Germany', value:79},
    ...
]

D3 数据连接分为两个阶段。首先，我们使用data 方法添加要连接的数据，然后使用join 方法执行连接。

要将 Nobel 数据添加到条形图组中，我们需要执行以下操作。首先，我们为条形图选择一个容器，在本例中就是我们的 SVG 组，其类为chart 。

然后，我们定义容器，在本例中是一个 CSS 类的选择器bar ：

var svg = d3.select('#nobel-bar .chart');

var bars =  svg.selectAll('.bar')
              .data(nobelData);

现在我们来看看 D3 的data 方法中一个略微违反直觉的方面。我们的第一个select 返回的是nobel-bar SVG 画布中的chart 组，但第二个selectAll 返回的是所有类为bars 的元素，其中没有任何元素。如果没有条形图，我们到底要将数据绑定到什么地方？答案是，在幕后，D3 正在记账，而且data 返回的bars 对象知道哪些 DOM 元素已经绑定到nobelData ，同样重要的是，哪些没有绑定。 现在，我们将看到如何使用基本的enter 方法来利用这一事实。

输入法

D3 的enter 方法（及其兄弟exit ）既是 D3 超强功能和表现力的基础，也是造成许多混乱的根源。虽然如前所述，新的join 方法简化了事情，但如果你真的想提高 D3 的技能，还是值得了解一下enter 。现在，让我们通过一个非常简单而缓慢的演示来介绍它。

我们将从一个典型的简单小演示开始，为诺贝尔奖数据中的每个成员添加一个矩形条。我们将使用前六个诺贝尔奖获奖国家作为绑定数据：

var nobelData = [
    {key:'United States', value:200},
    {key:'United Kingdom', value:80},
    {key:'France', value:47},
    {key:'Switzerland', value:23},
    {key:'Japan', value:21},
    {key:'Austria', value:12}
];

数据集到手后，让我们先用 D3 抓取图表组，将其保存到svg 变量中。我们将用它来选择bar 类的所有元素（目前没有）： ...