d3填充在內插線下

Question

在下面的d3線圖example中，我想填充線的顏色等同於線顏色和50％的透明度。

除了增加面積的CSS

.area { 
    fill: blue; 
    opacity: 0.5 
} 

加入以下function updateGraph(data)

svg.append("path") 
    .data([data]) 
    .attr("class", "area") 
    .attr("d", area); 

和

var area = d3.svg.area() 
    .x(function(d) { return x(d.year); }) 
    .y0(height) 
    .y1(function(d) { return y(d.value); }); 

什麼是需要填充的區域，以適應下內插線和填充顏色等同於線顏色？

Answer 1

其實，你必須創建行的選擇（命名爲states）之前新選擇，這裏命名：

var stateArea = svg.selectAll(".area") 
    .data(result, function(d) { 
     return d.key 
    }); 

stateArea.enter().append("path") 
    .attr("class", "area"); 

stateArea.transition() 
    .style("fill", function(d, i) { 
     return d.color = color(d.key); 
    }) 
    .style("opacity", 0.5) 
    .attr("id", function(d) { 
     return 'tagArea' + d.key.replace(/\s+/g, ''); 
    }) 
    .attr("d", function(d) { 
     return area(d.values) 
    }); 

stateArea.exit().remove(); 

這裏是更新bl.ocks：http://bl.ocks.org/anonymous/0c80f4f72247dcc8f590aa2d63d40da0

PS ：我只是在這裏附加區域，如果你想讓左邊的圖例改變區域，你必須重構代碼。