CODEWITHSUNDEEP
d3.js
Richard
Richard

Reputation: 65510

D3.js: Nested selections?

I'm working in D3.js and trying to understand nested selections and the general update pattern.

My data looks like this: 

var data1 = [
{ 'name': 'LHR', 'position': 1, 'flights': [1,10,12,14,3] },  
{ 'name': 'LAX', 'position': 2, 'flights': [3,6,12,6,3] },
{ 'name': 'SFO', 'position': 3, 'flights': [2,8,17,18,5] }
];

The rendered SVG is this: 

<g class="airport LAX">
<text class="LAX legend" x="250" y="40" dy=".2em">LAX</text>
<circle class="flight" cx="20" cy="16" r="3"></circle>
<circle class="flight" cx="40" cy="22" r="3"></circle>
<circle class="flight" cx="60" cy="34" r="3"></circle>
<circle class="flight" cx="80" cy="22" r="3"></circle>
<circle class="flight" cx="100" cy="16" r="3"></circle>
</g>

And I'd like smooth transitions for text and circle elements that are being added, updated and removed - new elements appearing from the top of the graph, updated elements moving smoothly, and deleted elements falling off the bottom of the graph.

Here is my code so far: http://jsfiddle.net/kqxhj/5/

I can transition new and updated elements. But what I can't do, for some reason, is get the exit selection for these elements to remove them nicely.

How can I get the exit selection for these circle and text elements, so that I can transition them smoothly off the bottom of the graph?

Upvotes: 0

Views: 361

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You only need one transition to remove the elements for a particular airport as everything is in a group. I've updated your jsfiddle here with the transition that moves everything to the bottom.

The key changes are that I've split the transition into two to first move the elements and then remove them and second to set the "transform" attribute instead of "y" which does nothing for groups. The relevant code is also below.

g.exit().transition()
  .duration(1000)
  .attr("transform", "translate(0," + 1.5*h + ")");
g.exit().transition().delay(1000)
  .remove();

Upvotes: 1

Related Questions