D3：使用过渡 .attr('x') 水平滑动<text>元素

Question

我想

1. 一个接一个地显示一些文字
2. 显示每个文本后，我想从页面的左侧水平滑动到页面的右侧：因此，我想更改文本的x = 10至x = 500。

我能够制作步骤1(，但不是2(。这是我的脚本：

var textall =["one", "two", "three"]
  var number = -1
    d3.select('svg')
        .transition()
            .duration(0)
            .delay(0)
            .on("start", function addtext() {
            number+=1;
            if (number < textall.length){
                d3.select('svg').append('g').append("text")
                    .attr("class", "one")
                    .attr('x', 10)
                    .attr('y', function(d,i) {return (number+1)*30; })
                    .text(textall[number])
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "20px")
                    .attr("fill", "black")
                    .transition()
                        .duration(0)
                        .delay(2000)
                        .on("start", addtext);
                        }
            <!-- }; -->
        });
    d3.selectAll(".one")
        .transition()
            .duration(1000)
            .delay(6000)
            .attr('x', 90)

在JSFiddle上

Answer 1

更新了小提琴，我已经更新了您的小提琴，而不是最终结果，而是足够的，您可以填写确切的值。基本上，我添加了.on("end")功能，该功能在添加文本后移动文本。进一步的调整可能会改善美学。