D3.js 如何更改d3 pathTween函数中的松弛度

我正试图使用找到的代码作为项目的起点。此代码使用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;
    };
  };
}

功能路径间（d1，精度）{
返回函数（）{
var path0=这个，
path1=path0.cloneNode（），
n0=path0.getTotalLength（），
n1=（path1.setAttribute（“d”，d1），path1.getTotalLength（）；
//基于指定精度的距离均匀采样。
变量距离=[0]，i=0，dt=precision/Math.max（n0，n1）；
当（（i+=dt）<1）距离时，推（i）；
距离。推（1）；
//计算每个距离处的点插值器。
var点=距离。映射（函数（t）{
var p0=path0.getPointAtLength（t*n0），
p1=路径1.getPointAtLength（t*n1）；
返回d3.插值（[p0.x，p0.y]，[p1.x，p1.y]）；
});
返回函数（t）{
返回t<1？“M”+点.map（函数（p）{返回p（t）；}）.join（“L”）：d1；
};
};
}

让我感到困惑的是，在这个例子中，这段代码中的某些东西使转换在某种程度上易于移入移出，我想把它改为线性。我认为这一定是pathTween（）中使用的函数之一的D3默认值，除非我忽略了pathTween（）中添加该值的部分

有人知道什么可能是默认的，以缓解进出，以及如何改变它吗

感谢您在D3 v3.x中的帮助

默认的缓和函数为“立方进退”

此

立方输入输出

将

。。。提供合适的动画

因此，如果需要线性缓和，只需显式设置：

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); });

以下是与此相关的代码：

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

var-width=960，
高度=500；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var d0=“M0,0c100,0 0100 100100c100,0，-100，-100”，
d1=“M0,0c100,0 0100 100c100,0，-100 100，-100c100,0 0100 100100”；
追加（“路径”）
.attr（“变换”、“平移（180150）比例（2,2）”）
.attr（“d”，d0）
.呼叫（转换，d0，d1）；
功能转换（路径，d0，d1）{
path.transition（）
.期限（2000年）
.ease（“线性”）
.attrTween（“d”，pathTween（d1，4））
.each（“end”，function（）{d3.select（this）.call（transition，d1，d0）；}）；
}
函数路径（d1，精度）{
返回函数（）{
var path0=这个，
path1=path0.cloneNode（），
n0=path0.getTotalLength（），
n1=（path1.setAttribute（“d”，d1），path1.getTotalLength（）；
//基于指定精度的距离均匀采样。
变量距离=[0]，i=0，dt=precision/Math.max（n0，n1）；
当（（i+=dt）<1）距离时，推（i）；
距离。推（1）；
//计算每个距离处的点插值器。
var点=距离。映射（函数（t）{
var p0=path0.getPointAtLength（t*n0），
p1=路径1.getPointAtLength（t*n1）；
返回d3.插值（[p0.x，p0.y]，[p1.x，p1.y]）；
});
返回函数（t）{
返回t<1？“M”+点.map（函数（p）{返回p（t）；}）.join（“L”）：d1；
};
};
}

路径{
填充：无；
行程：#000；
笔划宽度：1.5px；
}

---

感谢您的回复。虽然该代码在您的示例中工作得很好，但只要我尝试在实际文档中实现它，我就会在控制台中得到以下错误：Transition.Transition\u ease[as ease]（d3.js:3415）Transition（script.js:24）Selection.Selection\u call[as call]（d3.js:1187）时easeContent（d3.js:3405）处的未捕获错误在HTMLDocument。（script.js:17）在j（jquery.min.js:2）在k（jquery.min.js:2）知道为什么会这样吗？你使用的D3版本是什么？Bostock的代码使用v3.x.Yep，刚刚意识到这已经被删除或更改。我想我可以改成v3，除非你碰巧知道.ease函数改成了什么？再次感谢你的帮助