在 D3 中选择正确的插值以在路径（区域）内居中路径（线）答案

【问题标题】：choose the right interpolation in D3 to center a path (line) inside a path (area)在 D3 中选择正确的插值以在路径（区域）内居中路径（线）
【发布时间】：2019-08-09 08:24:15
【问题描述】：

例如，考虑下面的 D3 代码（仅相关部分，完整的 - 但只有不到十几行 - 代码在 JSFiddle 上），它在带内绘制一条线。

    var points = [
    [200, 100],
    [200, 200],
    [100, 300],
    [100, 400]
    ];

    var areaGenerator=d3.area()
    .curve(d3.curveMonotoneY)
    .x0(function(d){return d[0]-20})
    .x1(function(d){return d[0]+20})
    .y0(function(d,i){return d[1]})
    .y1(function(d,i){return d[1]})
    ;
    var area = areaGenerator(points);

    svg.append('path')
    .attr('d', area);

    svg.append("path")
    .data([points])
    .attr("d", d3.line()
    .curve(d3.curveCardinal
    .tension(0.8)))
    .attr("id","line")

这是生成的 svg 对象的图像：

我已经为.tension() 尝试了几个值，但我无法找到正确的插值函数来使线（大约）位于整个流程的波段中间，受到以下约束：线和带的第一个和最后一个部分应该完全垂直，它们不能向左或向右“放大”。

这就是我想要得到的，大概：

【问题讨论】：

解决这个问题的一个简单方法是使用 2 个相等的路径。填充=“无”。第一条路径的 stroke="pink" 笔画宽度很大。第二个具有相同的 d 属性 stroke="black" 和 stroke-width="1"
圆度可以使用stroke-linejoin:round;

标签： javascript d3.js svg interpolation

【解决方案1】：

我最初的答案没有经过深思熟虑。您可以简单地将相同的曲线属性应用于黑色路径，就像应用于红色路径一样：https://jsfiddle.net/s5o4hp3z/

只需将黑色路径更改为：

svg.append("path")
  .data([points])
  .attr("d", d3.line().curve(d3.curveMonotoneY))
  .attr("id","line")

------- 原答案 -------

您可以使用类似于用于红色区域的区域生成器，但具有宽度属性使其看起来像一条线。

我已经修改了你的 JSFiddle 来展示这个：https://jsfiddle.net/6e03o42f/3/

我所做的是将路径创建更改为：

var lineAreaGenerator = d3.area()
  .curve(d3.curveMonotoneY)
  .x0(function(d){return d[0]-0.5})
  .x1(function(d){return d[0]+0.5})
  .y0(function(d,i){return d[1]})
  .y1(function(d,i){return d[1]});

var lineArea = lineAreaGenerator(points);

svg.append("path")
  .attr("d", lineArea)
  .attr("id","line")

如果这确实是您选择的方法，那么您可能希望将区域生成器代码分离到一个函数中。我已经在这个 JSFiddle 中展示了如何做到这一点：https://jsfiddle.net/6e03o42f/4/

希望这会有所帮助！

【讨论】：