使用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，一个

3,3，c

4,3，b

4,2，一个

5,2，B

5,3，一个

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 + ")"; 
     }; 
    }; 
}