Javascript 使用d3从数据库自动显示数据

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

现在我需要动态显示对应于路径的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脚本部分：

在代码中，保留数据库部分。试试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

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

一种方法如下：

在定义

translateLong

函数之前，添加要在其中显示更新位置的文本元素，如：

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

然后在

translateLong

函数中，随着圆圈位置的变化更新文本：

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

---

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

一种方法如下：

在定义

translateLong

函数之前，添加要在其中显示更新位置的文本元素，如：

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

然后在

translateLong

函数中，随着圆圈位置的变化更新文本：

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

---

如果您可以与运行的代码（如jsfiddle）共享链接，将很容易获得帮助如果您可以与运行的代码（如jsfiddle）共享链接，将很容易获得帮助