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

如果您想做一些事情，例如淡出“ hello”然后淡入“ world”，则可以执行以下操作：

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。