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

Question

我已经习惯了d3，但似乎遇到了更高级结构的问题。我相当确定有一些微妙或概念，我并不完全赞赏。我希望能够使用不断变化的分层元素结构来镜像不断变化的分层数据结构。

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

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

完整（非）工作jsFiddle在这里！：http://jsfiddle.net/eu95R/2/，以及非常重要的诱人美丽的截图：

Answer 1

问题是您对groups的定义正在使用svg.enter()，而子选择是在groups上进行的。也就是说，您没有看到更改，因为在这种情况下groups为空（没有SVG的输入选择），因此没有进行子选择。

要修复，只需根据例如进行子选择即可。 svg（有很多方法可以解决这个问题 - 并不是说​​这一定是最好的方法）。当您将元素附加到SVG中的g时，选择器将为svg.selectAll("g").selectAll("text.item")...。

完整演示here。