D3.js: how to follow general update pattern to transition nested elements?

Question

I am working with D3.js, and learning the general update pattern. I understand it for simple data structures (I think!), but I would like to create a nested set of DOM elements: groups which contain paths and text elements. I'm not clear on how to access the update/enter/exit selection for the nested elements. In summary, this is the SVG structure that I want to end up with: ``` Red Sox Yankees ``` And I'd like to be able to access the update/enter/select selection explicitly on each element. My data looks like this: ``` [ { "name": "Red Sox", "code": "RED", "results": [...] }, { "name": "Yankees", "code": "YAN", "results": [...] }, ] ``` And this is my code - see it in full at the jsfiddle: http://jsfiddle.net/e2vdt/6/ ``` function update(data) { // Trying to follow…

Accepted Answer

It's working fine, you just have to change how you position the g element.

```
  g.transition()
    .duration(750)
    .attr("transform", function(d, i) { 
      return "translate(0,"+(i * 32 + 100)+")"; 
    });
```

The `<g>` element has no `x` & `y` attributes, so you must position it using svg transforms.

Here's some more information about it: https://developer.mozilla.org/en-US/docs/SVG/Element/g

The adjusted example: http://jsfiddle.net/e2vdt/10/

D3.js: how to follow general update pattern to transition nested elements?

Solution

Problem