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