在d3 v3中创建基数曲线时,我会使用张力(.0)来创建特定曲线.然而,在d3 v4中,紧张似乎已经改变.为了获得相同的曲线,我需要使用张力(-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中的错误吗？我不想利用错误,因为它们可以修补并破坏我的代码,但这是它似乎工作的唯一方式.如果有其他方式,请通知.

解决方法:

在我看来,有缺陷的版本是v3版本,而不是v4版本.

如果您阅读changelog,您会看到Bostock说：

4.0 fixes the interpretation of the cardinal spline tension parameter, which is now specified as cardinal.tension and defaults to zero for a uniform Catmull–Rom spline. (emphasis mine)

我们可以在这个演示中轻松看到它.我正在使用你的代码,绘制两条路径.其中一个,黄色,使用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：不要使用透明填充,请改用none.