路径交叉导致它们的某些部分消失 [D3 路径生成]

Question

我一直试图在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')

Answer 1

如果将路径的属性设置为橙色并降低不透明度，则所看到的行为的原因应该会变得更加明显：fill

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

let canvas =  d3.select('body');

        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').attr("fill","none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>