d3轉換錯誤

Question

我可能在這裏做一個菜鳥D3的錯誤，但我想用D3在現有的HTML元素中進行動畫更改。

所以我們可以說我有以下的HTML

<div id="label">Hello</div> 

然後我試圖如下與動畫D3可以改變：

d3.select("#label").transition().duration(1000).html("World"); 

我收到以下錯誤

"Object [object Array] has no method 'html'" 

當我忽略過渡時一切正常：

d3.select("#label").html("world"); 

我在做什麼錯在這裏？

Answer 1

如果您正在尋找這樣做淡出「你好」，然後在「世界」消失，你可以這樣做：

var $label = d3.select("#label"); 
$label.transition().duration(1000).style('opacity', 0); 
$label.transition().delay(1000).duration(1000).text("World").style('opacity', 1); 

但是，請注意，text方法應用於立即在第二次轉換的開始，並且只能用於純文本而不是html。