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。