如何更改 d3 pathTween 函数中的缓动

Question

我正在尝试使用找到的代码 here 作为项目的起点。这段代码使用D3使用一个叫做pathTween()的函数在两个路径之间进行转换，如下：

function pathTween(d1, precision) {
  return function() {
    var path0 = this,
        path1 = path0.cloneNode(),
        n0 = path0.getTotalLength(),
        n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

    // Uniform sampling of distance based on specified precision.
    var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
    while ((i += dt) < 1) distances.push(i);
    distances.push(1);

    // Compute point-interpolators at each distance.
    var points = distances.map(function(t) {
      var p0 = path0.getPointAtLength(t * n0),
          p1 = path1.getPointAtLength(t * n1);
      return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
    });

    return function(t) {
      return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
    };
  };
}

让我感到困惑的是，在此示例中，此代码块中的某些内容使过渡有一种缓入缓出的运动，我想将其更改为线性。我认为它必须是 pathTween() 中使用的函数之一的 D3 默认值，除非我忽略了 pathTween() 中会添加缓动的部分。

任何人都知道什么可能默认为缓入缓出以及如何更改它？

谢谢

Answer 1

D3 v3.x transition,

The default easing function is "cubic-in-out".

这 cubic-in-out 缓和...

... provides suitable slow-in slow-out animation.

因此，如果你想要一个线性缓动，你只需要明确地设置它：

path.transition()
    .duration(2000)
    .ease("linear")//set the ease here
    .attrTween("d", pathTween(d1, 4))
    .each("end", function() { d3.select(this).call(transition, d1, d0); });

这里是带有缓动的代码：http://blockbuilder.org/anonymous/d0f28de24658467d48053ef6e39e8413

S.O中的相同代码。片段：

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100",
    d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100";

svg.append("path")
    .attr("transform", "translate(180,150)scale(2,2)")
    .attr("d", d0)
    .call(transition, d0, d1);

function transition(path, d0, d1) {
  path.transition()
      .duration(2000)
      .ease("linear")
      .attrTween("d", pathTween(d1, 4))
      .each("end", function() { d3.select(this).call(transition, d1, d0); });
}

function pathTween(d1, precision) {
  return function() {
    var path0 = this,
        path1 = path0.cloneNode(),
        n0 = path0.getTotalLength(),
        n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

    // Uniform sampling of distance based on specified precision.
    var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
    while ((i += dt) < 1) distances.push(i);
    distances.push(1);

    // Compute point-interpolators at each distance.
    var points = distances.map(function(t) {
      var p0 = path0.getPointAtLength(t * n0),
          p1 = path1.getPointAtLength(t * n1);
      return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
    });

    return function(t) {
      return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
    };
  };
}

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

<script src="//d3js.org/d3.v3.min.js"></script>

编辑：您在评论中说您正在使用 D3 v4.x。既然如此，你有几个变化：

path.transition()
    .duration(2000)
    .ease(d3.easeLinear)
    .attrTween("d", pathTween(d1, 4))
    .on("end", function() { d3.select(this).call(transition, d1, d0); });

它们是：d3.easeLinear 而不是 "linear" 和 .on 而不是 .each。

这是积木建造者：http://blockbuilder.org/GerardoFurtado/90f1d1040bcfd3b4172f3965efab2b37

如何更改 d3 pathTween 函数中的缓动

How to change easing in d3 pathTween function

path

tween

d3.js