D3路径填充给出了奇怪的结果

Question

尝试用path元素和fill笔画不同颜色的正负两部分的正反两部分的正弦波，但得到了一个奇怪/混乱的输出。

• 与99分

​

• 399分

​

以下是D3代码：

window.onload = function(){

    let xy_values =[];
    let xy_values2 =[];
    
    let len = 99; //Number of points
    let dt = 8*Math.PI/len; //X-Distance between points
    
    for (var i =0; i<len; i++){
        
        let valx = i*dt;
        let valy = Math.sin(valx);
        
        if(valy > 0){ 
            // Positive sine
            xy_values.push( {key: valx, value: valy} );
            xy_values2.push( {key: valx, value: 0.0} );
        }else{
            //Negative sine
            xy_values.push( {key: valx, value: 0.0} );
            xy_values2.push( {key: valx, value: valy} );
        }
        
    }
    
    draw(xy_values, xy_values2);
    
    }
    
function draw(cdata, ddata){
    
    var height=200;
    var width=800;
    
    let svg=d3.select("#container").append("svg").attr("width", width).attr("height", height);
    
    walkX = d3.scaleLinear()
        .domain([0, 30])
        .range([40, width ])
    
    walkY = d3.scaleLinear()
        .domain([-1, 1])
        .range([height-10, 10])
    

    
    // Add the green regions
    svg.append("path")
        .datum(cdata)
        .attr("fill", "#BFB")
        .attr("stroke", "none")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
            .x(function(d) { return walkX(d.key) })
            .y(function(d) { return walkY(d.value) })
        );
    
    // Add the red regions    
    svg.append("path")
        .datum(ddata)
        .attr("fill", "#FBB")
        .attr("stroke", "none")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
            .x(function(d) { return walkX(d.key) })
            .y(function(d) { return walkY(d.value) })
        );
        
        
    // Add scatter points
    svg.append('g')
    .selectAll("dot")
    .data(ddata)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return walkX(d.key); } )
      .attr("cy", function (d) { return walkY(d.value); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2")
        
        
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + 10 + ")")
        .call(d3.axisBottom(walkX));
        
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + (height-10) + ")")
        .call(d3.axisBottom(walkX));
    
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + (height/2) + ")")
        .call(d3.axisBottom(walkX));
    
    svg.append("g")
        .attr("transform", "translate(" + 35 +","+ 0 +")")
        .call(d3.axisLeft(walkY));
    
}

问题

是什么导致了不正确的填充/倾斜填充？

这是因为一些精确的问题吗？还是fill在D3中的实现方式出现了问题？

Answer 1

是因为某些精度问题吗？还是在D3中实现fill的方式出现了问题？

不，D3只用于在DOM中创建SVG元素，而不是呈现它们，问题是如何应用SVG填充。当对path元素应用fill时，fill将路径的最后一点与第一个点连接起来，这就是您看到这种效果的原因。您将看到，您试图删除这两点之间的窗体线的效果。在呈现SVG的浏览器没有任何指令给填充一个不同的形状。

解决这个问题的一个选择是使用一个区域生成器，而不是一个允许设置基线的行生成器。

D3区域生成器为每个x值创建一个具有两个y值的路径(指定要填充的区域，而不是路径)，在这种情况下，一个位于基线(y0)，另一个位于数据值(y1)：

        d3.area()
        .x(function(d) { return walkX(d.key) })
        .y1(function(d) { return walkY(d.value) })
        .y0(function() { return walkY(0) })

​

window.onload = function(){

    let xy_values =[];
    let xy_values2 =[];
    
    let len = 99; //Number of points
    let dt = 8*Math.PI/len; //X-Distance between points
    
    for (var i =0; i<len; i++){
        
        let valx = i*dt;
        let valy = Math.sin(valx);
        
        if(valy > 0){ 
            // Positive sine
            xy_values.push( {key: valx, value: valy} );
            xy_values2.push( {key: valx, value: 0.0} );
        }else{
            //Negative sine
            xy_values.push( {key: valx, value: 0.0} );
            xy_values2.push( {key: valx, value: valy} );
        }
        
    }
    
    draw(xy_values, xy_values2);
    
    }
    
function draw(cdata, ddata){
    
    var height=200;
    var width=800;
    
    let svg=d3.select("#container").append("svg").attr("width", width).attr("height", height);
    
    walkX = d3.scaleLinear()
        .domain([0, 30])
        .range([40, width ])
    
    walkY = d3.scaleLinear()
        .domain([-1, 1])
        .range([height-10, 10])
    

    
    // Add the green regions
    svg.append("path")
        .datum(cdata)
        .attr("fill", "#BFB")
        .attr("stroke", "none")
        .attr("stroke-width", 1.5)
        .attr("d", d3.area()
            .x(function(d) { return walkX(d.key) })
            .y1(function(d) { return walkY(d.value) })
            .y0(function() { return walkY(0) })
        );
    
    // Add the red regions    
    svg.append("path")
        .datum(ddata)
        .attr("fill", "#FBB")
        .attr("stroke", "none")
        .attr("stroke-width", 1.5)
        .attr("d", d3.area()
            .x(function(d) { return walkX(d.key) })
            .y1(function(d) { return walkY(d.value) })
            .y0(function() { return walkY(0) })
        );
        
        
    // Add scatter points
    svg.append('g')
    .selectAll("dot")
    .data(ddata)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return walkX(d.key); } )
      .attr("cy", function (d) { return walkY(d.value); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2")
        
        
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + 10 + ")")
        .call(d3.axisBottom(walkX));
        
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + (height-10) + ")")
        .call(d3.axisBottom(walkX));
    
    svg.append("g")
        .attr("transform", "translate("+ 0 + "," + (height/2) + ")")
        .call(d3.axisBottom(walkX));
    
    svg.append("g")
        .attr("transform", "translate(" + 35 +","+ 0 +")")
        .call(d3.axisLeft(walkY));
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.0/d3.min.js"></script>
<div id="container"></div>

​

这给了我们：

​

​