如何使路径及其在d3中的点动画化 [英] How to animate a path along with its points in d3

问题描述

我正在尝试动画一组点和一个路径。基本上我想画出的路径，当点出现，有没有办法，他们有同样的延迟？我试着做一些计算，但是点似乎是在线到达之前绘制的。这是一个小提琴：

I am trying to animate a set of points along with a path. Essentially I want to draw the path as the point appears, is there a way for them to have the same delay? I tried doing some calculations but the points seem to be plotted before the line gets to it. Here is a fiddle:

http：// jsfiddle。 net / Y62Hq / 1 /

我的代码摘录：

var totalLength = path.node().getTotalLength();

var duration = 7000;
var interval = Math.round(duration/data.length);

path
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(duration)
    .ease("linear")
    .attr("stroke-dashoffset", 0);


var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("fill", "blue");

    circles
    .transition()
    .delay(function (d, i) { return i * interval;})
    .ease("linear")
    .attr({
        cx: function (d) { return yearScale(d.year); },
        cy: function (d) { return window.innerHeight - numberScale(d.number)},
        r: 4,
        fill: "blue",
        // /stroke: "#78B446",
        "stroke-width": 4
    });

推荐答案

问题是，并非所有的线段都是相同的长度。虽然它们都覆盖相同的x距离，但是y距离是不同的。因此，不同线段到达下一个点所花费的时间量不同。因此，您不能使用常量延迟。

Hmm, intriguing. The problem is that not all of your line segments are the same length. While they all cover the same x distance, the y distance is different. Therefore, the amount of time the different line segments take to reach the next point differs. So you can't use a constant delay.

这样做的一种方法是添加和测量不同的线段，记录它们的长度，并基于圆的延迟出现在相对于总长度和总持续时间的那些长度上。

One way of doing this is to add and measure the different line segments, record their lengths and base the delay of the circles appearing on those lengths relative to the total length and the total duration.

var segments = [0];
for(var i = 1; i < data.length; i++) {
  var tmp = svg.append("path")
    .datum([data[i-1], data[i]])
    .attr("d", line);
  segments.push(segments[i-1] + tmp.node().getTotalLength());
  tmp.remove();
}

此代码添加每个线段（从第一个点到第二个，第二个到第三等），测量其长度并随后立即去除它。结果累积在数组 segments 中，它给出了到此点的总路径的长度（这是延迟所需要的）。这是为什么先前的长度加到当前长度上的原因。

This code adds each line segment (from the first point to the second, second to third and so on), measures its length and removes it immediately afterwards. The result is accumulated in the array segments, which gives the length of the total path up to this point (this is needed for the delay). This is why the previous length is added to the current length.

然后你需要做的计算点的延迟是

Then all you need to do to compute the delay for the points is

.delay(function (d, i) { return segments[i]*duration/totalLength;})

完成演示此处。这应该适用于任何数量的点/线类型。

Complete demo here. This should work for any number of points/type of line.

这篇关于如何使路径及其在d3中的点动画化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！