javascript - 使用 D3.js 在文本值之间转换

Question

是否有任何方法可以在特定元素的文本值之间进行转换 - 例如在它们之间褪色或类似的东西？我没有找到与此相关的引用资料，但 D3 似乎是为这种事情而构建的。这个 jsfiddle 可能有助于:http://jsfiddle.net/geotheory/2wJr7/

<p>Intro text - click mouse on this text</p>
<script>
var i = 0;
var data = ['text 1','text 2','text 3','text 4','text 5','text 6','text 7','text 8'];

var change = d3.select('p').on("mousedown", function(){transition();});

function transition() {
    change.transition().duration(1000).text(data[i]);
    i = i + 1;
}
</script>

Answer 1

您可以通过将 opacity 设置为 0 然后在两个连接的转换中设置为 1 来实现此目的:

change.transition().duration(500)
    .style("opacity", 0)
    .transition().duration(500)
    .style("opacity", 1)
    .text(data[i]);

完整的 jsfiddle here .