javascript - D3 中的重复值和重叠 selectAll

Question

我是 d3.js 新手，我刚刚开始学习快速练习。 我用不同的模式附加不同的文本，因此我通过 selectAll("text") 语句使用不同的函数。

但这有一个问题。如果我附加 3 个标签，然后尝试再附加 4 个标签，则只会应用第 4 个标签。这是因为 selectAll 会遍历已经插入的内容。谷歌搜索这个问题我了解到解决方案是使用 .data(data, function(d){ return d; }) 并且新元素将被正确添加。到目前为止我的所有问题都已解决。

现在问题出现了，我需要在两个不同的上下文中附加值“40”和“60”两次，但重复的值将被忽略。 我再次用谷歌搜索解决方案并找到了这篇文章 - Complex data object with duplicate 'values' = missing chart bars它说解决方案是删除我之前提到的同一行或使用不同的值，但就我而言，我正在处理一个普通的数字数组。删除包含先前元素的行并没有帮助，因为不会附加下一个元素。

编辑:有一个 github 问题讨论了这个问题 Clarify behavior for selection.data in re. to duplicate keys. #997 - 我没有发现它以任何方式澄清。也许你会比我更好地理解它......

编辑2:这是一个jsFiddle explaining the issue

Answer 1

由于这是一个有据可查的错误，无法修复，因此您可以调整数据，添加索引以防止重复键上的错误选择:

[{index:1, value:3},
 {index:2, value:2},
 {index:3, value:3}]

并引用为:d.index 和 d.value:

d3.select(".I997").selectAll("p")
            .data([{index:1, value:3},{index:2, value:2},{index:3, value:3}])
      .enter()
      .append("p")
      .text(function (d) {return d.value})

d3.selectAll("p")
      .data([{index:4, value:3}])
      .append ("p")
      .text(function (d) {return d.value})

或者你可以使用这个:

var ps = d3.select("body").selectAll('div')
  .data([3, 2, 3])
  .enter()
  .append('div')
  .text(String);

d3.selectAll('div')
  .data([3])
  .append('div')
  .text(String);

这正如你所期望的那样工作

这里是工作代码:https://jsfiddle.net/5rxadq4q/

https://jsfiddle.net/v0n8971q/1/