Question

是否有一种简单的方法可以D3绘制＆＃39;路径＆＃39;过渡期间的两点之间？

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

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

Answer 1

有趣的问题。我想这取决于您对＆＃34;简单＆＃34;的定义，但您可以使用转换的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。为了使其适用于多个过渡，您需要添加允许区分线条的内容，例如：基于绑定到相应点的数据的类或保持显式引用。

在两点之间绘制路径轨迹

1 个答案: