d3 中的嵌套数据集，更新正确的元素

【问题标题】：Nested datasets in d3, updating the right elementd3 中的嵌套数据集，更新正确的元素
【发布时间】：2015-04-08 19:38:58
【问题描述】：

我在 d3 中遇到了嵌套数据集的问题。我有许多行，应该呈现为文本，并且每一行都有许多呈现为圆圈的数据点。我的第一次尝试是将圆圈放在节点内，使它们不可见。然后我尝试了labels.enter().append("g").append('text')，它起作用了，现在 the 和标签都放在同一个标签内。但是，这样做，当我稍后执行 labels.transition().attr(...) 来更新样式时， attr 样式最终会出现在标签上，而不是标签上？（并且由于 enter 中的文本样式仍然存在，它会覆盖，并且没有任何变化）。

Full listing here

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您的变量 labels 在此处定义：

var labels = App.svg.selectAll("g").data(data, function(d) { return d.id });

即使在调用输入选择时，您同时添加了<g> 标记和<text> 标记，您的labels 变量仍然引用您最初选择的<g> 元素。

labels.enter().append("g").append('text')

如果稍后您想访问每个标签内的<text> 元素，则需要明确选择它们：

labels.select('text') // array of <text> elements for each <g> (label)

【讨论】：