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')

标签： javascriptd3.jssvg

如果您将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>

javascript - 路径交叉导致部分消失【D3路径生成】

问题描述

解决方案

推荐阅读