javascript - D3 transition not working

I have the following SVG element:

<svg id='svgTest' xmlns="" version="1.1">
  <g id="test">
    <rect height="20" width="50" fill="blue"/>
  </g>
</svg>

I want to add a transition for the blue rectangle. I tried with the following code with D3:

var rect = d3.select("#test");
rect.transition().duration(5000).attr('height',200);

But it doesn't seem to do anything. What's wrong?

I have the following SVG element:

<svg id='svgTest' xmlns="http://www.w3/2000/svg" version="1.1">
  <g id="test">
    <rect height="20" width="50" fill="blue"/>
  </g>
</svg>

I want to add a transition for the blue rectangle. I tried with the following code with D3:

var rect = d3.select("#test");
rect.transition().duration(5000).attr('height',200);

But it doesn't seem to do anything. What's wrong?

Share asked Oct 12, 2012 at 19:50 PLui 7653 gold badges12 silver badges29 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

You need to select the 'rect' element. Try this:

var rect = d3.select("#test rect");

rect.transition().duration(5000).attr('height',200);

If you want to update multiple elements, use d3.selectAll().