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位置。

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

在定义sapply(ttTokenized, paste, collapse = " ") ## [1] "esta unica lista hacer" "esta unica"函数之前，附加要在其中显示更新位置的文本元素，如：

translateAlong

然后在text = svg.append("text") .style("fill","red");函数内部，随着圆圈位置的变化更新文本：

translateAlong

使用d3

1 个答案: