javascript - D3 トランジションが機能しない

Question

次の SVG 要素があります。

<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>

青い四角形のトランジションを追加したいと思います。D3で次のコードを試しました：

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

しかし、それは何もしないようです。どうしたの？

Answer 1

「rect」要素を選択する必要があります。これを試して：

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

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

複数の要素を更新する場合は、d3.selectAll() を使用します。