在两点之间绘制路径轨迹

Question

D3 有没有一种简单的方法可以在过渡期间在两点之间绘制“轨迹”？

换句话说，我在散点图之间转换。当我进行过渡时，一组点被另一组替换，更新时带有补间。

如何在更新时在旧点和新点之间创建路径？有必要用stroke-dasharray吗？

Answer 1

有趣的问题。我想这取决于您对“简单”的定义，但是您可以使用转换的 start 和 end 事件以及自定义补间在转换开始时添加一行，随着转换的进行更新其端点，并删除过渡结束时。

circle.transition().duration(2000)
  .attrTween("cx", function() {
    var start = d3.select(this).attr("cx"),
        i = d3.interpolate(start, 200)
    return function(t) {
        var current = i(t);
        svg.select("line.tmp").attr("x2", current);
        return current;
    }
  })
  .each("start", function() {
    svg.append("line").attr("class", "tmp")
        .attr("x1", d3.select(this).attr("cx"))
        .attr("y1", d3.select(this).attr("cy"))
        .attr("y2", d3.select(this).attr("cy"));
  })
  .each("end", function() {
    svg.select("line.tmp").remove();
  });

完整的概念证明here。要使其适用于多个转换，您需要添加一些允许区分行的内容，例如基于数据绑定到相应点或保留显式引用的类。