Javascript 路径相交导致部分路径消失[D3路径生成]

我一直试图在SVG上生成两条路径，但其中一条路径似乎稍微消失了。我想知道是什么导致了这个问题。我尝试过使用不同的路径绘制公式，但没有成功。代码非常简单，如下所示：

     import * as d3 from "d3";

     let canvas =  d3.select('#canvas');
        let svg = canvas.append('svg')
        .attr('width',1820)
        .attr('height', 790)
        .style('background-color', 'black')

        var pathInfo = [
            {
              p: 'P',
              data:  [[0, 40], [50, 30], [100, 50], [200, 60], [300, 90]]
            },
            {
              p:'p2',
              data:  [[0, 40], [50, 30], [100, 50], [200, 60], [350, 90]]
            }
        ]
        const curve = d3.line().curve(d3.curveNatural);
        svg.selectAll('path')
        .data(pathInfo)
        .enter()
        .append('path')
        .attr('d', (d)=> curve(d.data)).attr('stroke', 'white')

---

如果将路径的

fill

属性设置为橙色，并降低不透明度，则您看到的行为的原因应该更加明显：

SVG路径的默认填充颜色为黑色，并且无论路径是否为闭合路径，默认情况下都会填充路径。在您的示例中，上面的橙色区域是黑色的。因此，您看到的结果是由于第二条路径的填充覆盖了第一条路径在其大部分长度上的笔划。因此，只有部分笔划可见。后台会混淆问题，但解决方案是将填充设置为

none

：

let canvas=d3.select（'body'）；
让svg=canvas.append（'svg'）
.attr（'width'，1820年）
.attr（'height'，790）
.style（'背景色'，'黑色'）
变量路径信息=[
{
p：‘p’，
数据：[[0,40]，[50,30]，[100,50]，[200,60]，[300,90]]
},
{
p:‘p2’，
数据：[[0,40]，[50,30]，[100,50]，[200,60]，[350,90]]
}
]
常数曲线=d3.line（）.curve（d3.curveNatural）；
svg.selectAll（'path'）
.数据（路径信息）
.输入（）
.append（'路径'）
.attr（'d'，（d）=>曲线（d.data））.attr（'stroke'，'white'）.attr（“fill”，“none”）