d3：将元素附加到现有 svg 时的关键功能选择

【问题标题】：d3: key function choice when appending element to an existing svgd3：将元素附加到现有 svg 时的关键功能选择
【发布时间】：2016-03-26 05:52:50
【问题描述】：

我在这里阅读了博文：http://knowledgestockpile.blogspot.com/2012/01/understanding-selectall-data-enter.html

并对此有疑问。

我有 2 个数据集

var dataset1 = [5, 10, 15, 20, 25];
var dataset2 = [11, 12, 13, 14, 15];

我想在同一个 svg 中为 dataset1 创建一个蓝色条形图并为 dataset2 添加一个绿色条形图。

当我追加时：

svg.selectAll("rect")
        .data(dataset2, function(d) { return d; })
        .enter()

就像博文建议的那样，我在这里使用了一个特定的键函数（返回数据集中的实际值）。但由于 15 出现在两组中，我错过了绿色条形图的 15。

避免这种情况的最佳方法（我应该使用的关键功能）是什么？

我的整个代码都在这个 JSfiddle 中：http://jsfiddle.net/ypeng42/pwm5mmcz/25/

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

原因

您要加入数据集，首先考虑对 svg.selectAll('rect').data(dataset1) 的初始调用

svg.selectAll('rect').data(dataset1)
- enter: [5, 10, 15, 20, 25]
- update: []
- exit: []

然后将第二个数据集与第一个数据集连接

svg.selectAll('rect').data(dataset2)
- enter: [11, 12, 13, 14]
- update: [15]
- exit: [5, 10, 20, 25]

您没有更新或退出代码，这就是为什么15 仍然是蓝色的

解决方案

通过添加限制（例如一个班级

svg.selectAll("rect.blue")
    .data(dataset1)
    .enter()
    .append('rect')
    .attr('class', 'blue')

svg.selectAll("rect.green")
    .data(dataset2)
    .enter()
    .append('rect')
    .attr('class', 'green')

我个人会创建以下结构

 <svg>
   <g class="first">
      nodes for the first dataset
   <g class="second">
      nodes for the second dataset

demo

【讨论】：