D3路徑填充給出了奇怪的結果

嘗試使用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 中實作的方式有問題？

uj5u.com熱心網友回復：

這是因為某些精度問題嗎？或者它是在 D3 中實作填充方式的一個小故障？

不，D3 僅用于在 DOM 中創建您的 SVG 元素，而不是渲染它們，問題是如何應用 SVG 填充。對路徑元素應用填充時，填充將路徑的最后一個點與第一個點連接起來，這就是您看到這種效果的原因。您將看到您嘗試洗掉這兩個點之間的表格線的效果。渲染 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) })

Show code snippet

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>

這給了我們：

標籤：svg d3.js

上一篇：在面板中顯示用戶控制元件

下一篇：如何使用來自另一個json檔案的資料將attr填充與scalesqrt一起使用？