使用 D3.js 在文本值之间转换答案

【问题标题】：Transitioning between text values with D3.js使用 D3.js 在文本值之间转换
【发布时间】：2014-02-03 17:38:21
【问题描述】：

是否有任何方法可以在特定元素的文本值之间进行转换 - 例如它们之间的褪色或类似的东西？我没有找到与此相关的参考资料，但 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>

【问题讨论】：

标签： javascript d3.js label transition

【解决方案1】：

您可以通过将opacity 设置为 0，然后在两个连接的转换中设置为 1 来做到这一点：

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

完整的 jsfiddle here.

【讨论】：

【解决方案2】：

像这样？

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() {
    for (i=0; i < data.length; i++)
    change
        .transition()
        .delay(i * 1000)
        .duration(500)
        .text(data[i]);
}

【讨论】：

【解决方案3】：

This is more beautiful than changing opacity

function transition() {
    d3.select('text').transition()
        .duration(500)
        .style("font-size","1px")
        .transition()
        .duration(500)
        .text(data[i])
        .style("font-size","16px");
    i = i + 1;
}

【讨论】：

感谢 VividD，我喜欢它。适用于居中对齐的文本。