Question

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

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

小提琴应该有效，但不能：https://jsfiddle.net/diogoscf/3xma5wxu/

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

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

Answer 1

我不认为这是一个错误，因为catmullRom与alpha 0产生的结果相同，curveNatural会得到最接近你期望的结果，使用负数张力值是一个坏主意，它甚至不应该划清界限。

Answer 2

在我看来，有缺陷的版本是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。

d3 v4中的曲线张力很奇怪

2 个答案: