javascript - d3 : key function choice when appending element to an existing svg

Question

我在这里阅读了博客文章: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 中为数据集 1 创建一个蓝色条形图，并为数据集 2 附加一个绿色条形图。

当我追加时，我做了:

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

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

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

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

Answer 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