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

Question

I'm getting used to d3, but seem to be having trouble with more advanced structures. I'm fairly sure there's some subtlety or concept I am not fully appreciating. I want to be able to mirror a changing hierarchical data structure with a changing hierarchical element structure.

My data structure is 3 groups, each with 3 items. Each group and item has a unique key, extracted using a key function in the data() call.

I build the structure, and I can remove a top-level item; .exit().remove() works just fine on that selection. BUT, modifying or removing any sub-item is simply not reflected in the generated element structure.

Full (non-)working jsFiddle here!: http://jsfiddle.net/eu95R/2/ , and the all-important enticingly beautiful screenshot:

Answer 1

The problem is that your definition of groups is using svg.enter() and the subselection is made on groups . That is, you're not seeing a change because groups in this case is empty (no enter selection for the SVGs) and therefore there's no subselection.

To fix, simply do the subselection based on eg svg (there are a number of ways to fix this -- not saying that this is necessarily the best one). As you are appending the elements to a g within the SVG, the selector would be svg.selectAll("g").selectAll("text.item")... .

Complete demo here .