2012-10-12 120 views
2

我有以下的SVG元素:D3過渡不工作

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

但它似乎並沒有做任何事情。怎麼了?

回答

5

您需要選擇'rect'元素。試試這個:

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

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

如果要更新多個元素,請使用d3.selectAll()。

+0

如果我想移動整個組,可以選擇組嗎? – PLui

+0

否 - 修改必須應用變換的g元素。 –

+0

有沒有辦法循環組中的所有元素,以便我可以對它們應用變換? – PLui