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

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