d3转换错误

Question

I am probably making a rookie D3 mistake here, but I am trying to use D3 to make an animated change in an existing HTML element.

So let's say I have the following HTML

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

And then I am trying to change this with animated D3 as follows:

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

I get the following error

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

When I leave out the transition all works well:

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

What am I doing wrong here?

Answer 1

If you're looking to do something like fade out the "hello" and then fade in the "world", you can do something like:

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

However, note that the text method is applied immediately at the beginning of the second transition and will only work for plain-text, not html.