d3 v4中的曲线张力很奇怪

Question

当在d3 v3中创建基数曲线时，我会使用tension(.0)来创建某个曲线。然而，在d3 v4中，紧张似乎已经改变。要获得相同的曲线，我需要使用tension(-1.3)。这甚至不起作用，因为张力应该在0和1之间。

小提琴为v3：https://jsfiddle.net/diogoscf/5st4wk7c/

v4的小提琴应该可以工作但不会：https://jsfiddle.net/diogoscf/3xma5wxu/

小提琴的v4应该不起作用，但确实：https://jsfiddle.net/diogoscf/3xma5wxu/2/

这是d3 v4中的错误吗？我不想利用错误，因为它们可以修补并破坏我的代码，但这是它似乎工作的唯一方式。如果有其他方式，请通知。

Answer 1

在我看来，有缺陷的版本是v3版本，而不是v4版本。

如果你读过changelog，你会看到Bostock说：

4.0修复了基数样条张力参数的解释，现在将其指定为cardinal.tension，对于均匀的Catmull-Rom样条，默认为零。 （强调我的）

我们可以在这个演示中轻松看到它。我正在使用你的代码，绘制两条路径。其中一个，黄色，使用d3.curveCardinal.tension(.0)：

var line = d3.line()
  .curve(d3.curveCardinal.tension(0));

在它面前，我正在绘制另一个使用d3.curveCatmullRom的蓝色：

var line2 = d3.line()
  .curve(d3.curveCatmullRom.alpha(0));

如你所见，它们是相同的（我在你的点上放了红色圆圈）：

var line = d3.line()
  .curve(d3.curveCardinal.tension(0));

var line2 = d3.line()
  .curve(d3.curveCatmullRom.alpha(0));

var svg = d3.select("svg")
  .append("g")
  .attr("transform", "translate(20,0)");

var points = [
  [0, 80],
  [100, 100],
  [200, 30],
];

svg.append("path")
  .datum(points)
  .attr("d", line)
  .style("stroke", "yellow")
  .style("stroke-width", "6")
  .style("fill", "none");

svg.append("path")
  .datum(points)
  .attr("d", line2)
  .style("stroke", "blue")
  .style("stroke-width", "2")
  .style("fill", "none");

svg.selectAll(null)
  .data(points)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("fill", "red")
  .attr("cx", d => d[0])
  .attr("cy", d => d[1]);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

因此，@Marcell's解释是正确的。

PS：不要使用transparent作为fill，而是使用none。

Answer 2

我不认为这是一个错误，因为catmullRom与alpha 0产生相同的结果，curveNatural给出了最接近你期望的结果，使用负张力值是一个坏主意，它甚至不应该画线。