我已经从bl.ocks.org的Point-Along-Path Interpolation示例中复制并粘贴了代码，然后添加了关于过渡缓和的行（下面以注释突出显示），但是会产生错误Cannot read property 'indexOf' of undefined错误。怎么了？
（JSFiddle here）
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
fill: steelblue;
stroke: #fff;
stroke-width: 3px;
}
</style>
<script src="d3.v3.min.js"></script>
<script>
var points = [
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
svg.selectAll(".point")
.data(points)
.enter().append("circle")
.attr("r", 4)
.attr("transform", function(d) { return "translate(" + d + ")"; });
var circle = svg.append("circle")
.attr("r", 13)
.attr("transform", "translate(" + points[0] + ")");
transition();
function transition() {
circle.transition()
.duration(10000)
.ease(d3.easeLinear) // this is the line I've added
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
</script>
最佳答案
您正在添加缓动函数，就像在v4或d3的5中所做的那样。 D3v4对D3处理传递给许多方法的参数的方式进行了结构性更改。在D3v4 +中，不是将字符串传递给这些方法以指定某些功能，而是将对象或函数（通常是D3的属性）传递给方法。
因此在d3v3中：
transition.ease("linear")
现在在d3v4 +
transition.ease(d3.easeLinear);
因此，由于您的代码是d3v3，因此只需要使用旧格式。 Here是更新的小提琴。