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

Question

我想

依次显示一些文字
每个文本显示后，我想将它们从页面左侧水平滑动到页面右侧：所以我想将文本的 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 我已经更新了您的 fiddle，不是最终结果，而是足以让您填写准确的值。基本上我添加了 .on("end") 函数，可以在添加文本后移动文本。可能会发生进一步的调整以改善美感。

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

D3: use transition .attr('x') to horizontally slide <text> elements

transition

slide

d3.js