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

喜欢这个吗？

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]);
}

Answer 2

您可以通过将opacity设置为0然后在两个连接的转换中设置为1来执行此操作：

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

完成jsfiddle here。

Answer 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;
}

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

3 个答案: