Circle radius not updated when going to d3

Question

I am having problems with transtion in d3. This jsfiddle illustrates the problem: http://jsfiddle.net/3bzsE/

When the page loads, dataset01 is used to create a circle for each person in the array. d.name is used as a key.

The blue rectangles below the chart are buttons that update data when clicked.

Here is the update function:

function updateVis(data) { var points = svg.selectAll('.nameinfo') .data(data, function(d) { return d.name;}); var pointsEnter = points .enter() .append('g') .attr('class', 'nameinfo'); pointsEnter .append('circle') .attr('cx', function(d) { return 10 + d.position * 100; }) .attr('cy', width/2) .attr('r', 0) .style('fill', function(d) { return z(d.position); }) .style('fill-opacity', 0.5) .style('stroke', '#232323') .append("title") .text(function(d) { return d.name; }); pointsEnter .append('text') .attr('x', function(d) { return 10 + d.position * 100; }) .attr('y', width/2) .attr("dy", "0.35em") .style("text-anchor", "middle") .style("font-size", "11px") .text(function(d, i) { return d.name; }); pointsUpdate = points .selectAll('circle') .transition().duration(500) .attr('r', function(d){ return d.value/2;}); var pointsExit = points.exit().transition().duration(500).remove(); pointsExit .selectAll('circle') .attr('r', 0); } 

Inputs and outputs behave as expected, but the radius of the circle does not change for names that are present in the input and output data sets.

An example of using values ​​for Jim: pressing the three button with one button:

• Exit Joe, Janet and Julie
• Jane and John enter
• But the radius of Jim does not change (it should decrease, since d.value varies from 130 to 50).

By clicking on two with three active reasons, Jim will exit. Clicking on three of the two causes Jim to enter the correct radius from dataset03.

The same behavior can be seen with other names. In all cases, it enters and exits, but if two data sets have the same element, the radius is not updated upon transition

Answer 1

You may need to specifically select circles for your transition, rather than trying to do this on an external element of the group. So instead:

 pointsUpdate = points .selectAll('circle') .transition().duration(500) .attr('r', function(d){ return d.value/2;}); 

Do it:

  svg.selectAll('.nameinfo circle') .data(data, function(d) { return d.name;}) .transition().duration(500) .attr('r', function(d){ return d.value/2;}); 

UPDATE: The following is another way that is better suited to the general D3 philosophy of reusing existing data / choices:

 points .select('circle').transition().duration(500) .attr('r', function(d){ return d.value/2;});