javascript - 使用 d3 自动显示数据库中的数据

Question

我有一个根据 X 和 Y 值绘制的路径的小动画。我需要显示 X 和 Y 的值以及路径。整个路径的持续时间是固定的，并使用 attrTween 来实现平滑的动画。

现在我需要动态显示与路径对应的X和Y值。

我该怎么做？

我的部分代码是:

   text = svg.append("text")
             .data(data.slice(0,1))
             .style("fill","red");

   transition1();

   function transition1() {
       text.transition()
           .duration(data.length*100)
           .attrTween("x",translateAlong1(path.node()))
           .each("end", runNewData);
   }

   function translateAlong1(path) {
       return function(d,i,a) {
           return function(t) {
               var p1 = path.getPointAtLength(t * data.length * 100);
               return "X is " + p1.x + "Y is " + p1.y+;
           };
       };
   }

runNewData 是另一个数据源。你可以忽略它。

您可以在这里看到java脚本部分:http://pastebin.com/ARpxEXsq

在代码中，保留数据库部分。只需尝试 runNewData。

文件内容为:

x,y,z

0,6，你好

1,5,嗨

2,4,a

3,3,c

4,3,b

4,2,a

5,2,b

5,3,a

5,4,c

Answer 1

您的问题不明确，但我假设您想要显示沿路径移动的圆的当前 x 和 y 位置。

执行此操作的一种方法如下:

在定义 translateAlong 函数之前，附加要在其中显示更新位置的文本元素，例如:

text = svg.append("text")
    .style("fill","red");

然后在 translateAlong 函数中，随着圆圈位置的变化更新文本:

function translateAlong(path) {
    return function(d, i, a) {
        return function(t) {
            var p = path.getPointAtLength(t*data.length*100);
            // Update the text inside the text element:
            text.text("X is " + p.x + "Y is " + p.y);
            return "translate(" + p.x + "," + p.y + ")";
         };
    };
}