的原因

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];

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

当我追加时，我做了：

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

d3：将元素附加到现有svg

1 个答案:

的原因

解决方案