Question

我是一个d3.js菜鸟，我刚开始学习快速锻炼。我添加了不同模式的不同文本，因此我使用selectAll("text")语句使用不同的函数。

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

问题现在我需要追加价值观＆＃34; 40＆＃34;和＆＃34; 60＆＃34;在两个不同的上下文中两次，但重复的值被忽略。我再次搜索了一个解决方案并发现了这篇文章 - 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/

D3

1 个答案: