score:11

Accepted answer

After the transition and duration, you must update the attributes that will change. A code sample:

var svg = d3.select("body").append("svg");

svg
  .attr('id','mySVG')
  .attr('width', '100%')
  .attr('height', '100%');

// Set the initial properties of the circles
var circle = svg.selectAll('circle')
    .data([2, 5, 8])
    .enter()
    .append('circle')
        .attr('cx', function(item) { return item; })
        .attr('cy', function(item) { return item; })
        .attr('r', 0)
        .attr('fill', '#babdb6');

// Update the attributes that will change
circle
    .transition()
    .duration(2000)
        .attr('fill-opacity', 0.2)
        .attr('r', function(item) { return 100 * item; });

I wrote a minimal example that can help you. http://jsfiddle.net/pnavarrc/udMUx/.


Related Query

More Query from same tag