Geek Answers Handbook

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

I work with D3.js and study the general update pattern.

I understand this for simple data structures (I think!), But I would like to create a nested set of DOM elements: groups that contain paths and text elements. I do not understand how to access the update / enter / exit selection for nested elements.

So this is the SVG structure I want to end up with:

<g class="team"> <path class="outer" d="..."></path> <text class="legend" x="890" dy=".2em" y="23">Red Sox</text> </g> <g class="team"> <path class="outer" d="..."></path> <text class="legend" x="890" dy=".2em" y="23">Yankees</text> </g>

And I would like to have access to the update / enter / select phenomenon explicitly for each element. My data is as follows:

 [ { "name": "Red Sox", "code": "RED", "results": [...] }, { "name": "Yankees", "code": "YAN", "results": [...] }, ]

And this is my code - see it fully in jsfiddle: http://jsfiddle.net/e2vdt/6/

 function update(data) { // Trying to follow the general update pattern: // http://bl.ocks.org/mbostock/3808234 // Join new data with old elements, if any. var g = vis.selectAll("g.team").data(data, function(d) { return d.code; }); // Update old elements as needed. // QUESTION: How to get the update selection for the text elements? // Currently the text element is not moving to the right position. g.selectAll("text.legend").transition() .duration(750) .attr("y", function(d, i) { return i * 32 + 100; }); // Create new elements as needed. var gEnter = g.enter() .append("g").attr("class","team"); gEnter.append("text").attr("class", "legend") .attr("dy", ".35em") .attr("y", function(d, i) { return i * 32 + 100; }) .attr("x", "20") .style("fill-opacity", 1e-6) .text(function(d) { return d.name; }) .transition() .duration(750) .style("fill-opacity", 1); // TBA: Add path element as well. // Remove old elements as needed. g.exit() .transition() .duration(750) .attr("y", "0") .style("fill-opacity", 1e-6) .remove(); }

Choosing an input and output works fine, but I don’t know how to get a choice for updating so that I can move the text labels to the correct position. The record "Red Sox" should move around the page, but it is not.

+4
source share
1 answer

It works great, you just need to change the way the g element is placed.

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

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

Here's more info on this: https://developer.mozilla.org/en-US/docs/SVG/Element/g

Corrected Example: http://jsfiddle.net/e2vdt/10/

+4
source

More articles:


All Articles