javascript - 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。