Javascript d3-嵌套选择/子项更新问题

Javascript d3-嵌套选择/子项更新问题,javascript,d3.js,Javascript,D3.js,我已经习惯了d3,但似乎在使用更高级的结构时遇到了问题。我相当肯定有些微妙之处或概念我并不完全欣赏。我希望能够将不断变化的分层数据结构与不断变化的分层元素结构进行镜像 我的数据结构是3个组,每个组有3项。每个组和项都有一个唯一的键,使用data()调用中的键函数提取 我构建了这个结构,我可以删除一个顶级项目.exit().remove()在该选择上运行良好。但是,修改或删除任何子项都不会反映在生成的元素结构中 这里是完整(非)工作的JSFIDLE!:,还有最重要的迷人美丽的屏幕截图: 问题在于,

我已经习惯了d3,但似乎在使用更高级的结构时遇到了问题。我相当肯定有些微妙之处或概念我并不完全欣赏。我希望能够将不断变化的分层数据结构与不断变化的分层元素结构进行镜像

我的数据结构是3个组,每个组有3项。每个组和项都有一个唯一的键,使用
data()
调用中的键函数提取

我构建了这个结构,我可以删除一个顶级项目
.exit().remove()
在该选择上运行良好。但是,修改或删除任何子项都不会反映在生成的元素结构中

这里是完整(非)工作的JSFIDLE!:,还有最重要的迷人美丽的屏幕截图:


问题在于,您对
组的定义使用的是
svg.enter()
,子选择是在
组上进行的。也就是说,您没有看到更改,因为在本例中,
groups
为空(SVG没有输入选择),因此没有子选择

要解决此问题,只需根据svg(例如,
svg
)进行子选择(有多种方法可以解决此问题,但不一定是最好的方法)。当您将元素添加到SVG中的
g
时,选择器将是
SVG.selectAll(“g”).selectAll(“text.item”)…


完成演示。

谢谢,但是您能解释一下吗?这不会产生类似的元素层次结构;这些项目不会添加到每个组的元素中,而是直接添加到“svg”中。在我的实际情况中,组元素具有与组相关的数据,但也应用了子元素应该继承的转换。有没有一种方法可以用这种方式映射层次数据->层次元素?啊,很好!我错过了附加的
g
元素。你所需要的只是一个额外的
。在这里选择All()
,我会编辑答案。我知道,但你对我的.exit()/.order()转换问题没有任何想法,是吗?