javascript - D3-övergång fungerar inte

Jag har följande SVG-element:

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

Jag vill lägga till en övergång för den blå rektangeln. Jag försökte med följande kod med D3:

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

Men det verkar inte göra någonting. Vad är fel?

Svar #1

Du behöver välja 'rect'-elementet. Prova detta:

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

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

Om du vill uppdatera flera element, använd d3.selectAll().