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()。