如何添加背景陰影到D3折線圖

Question

我想添加陰影到D3折線圖的背景。該線的不同部分將會有不同的陰影。這裏是一個example

我的做法是添加矩形svg圖表，但這似乎並沒有工作，因爲我不知道如何使寬度符合數據。

here is a jsfiddle

這裏是矩形創作的一個例子：

svg.append("rect") 
    .attr("class", "shading") 
    .attr("x", d[1].date) 
    .attr("y", 80) 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("fill", "blue"); 

我在正確的軌道上？如何找到寬度以便與數據相符？

更新：會有多個不同寬度的正方形，所以我不能只抓住整個svg的寬度。

Answer 1

與數據第一補SVG，然後之後得到了width屬性，它會自動計算它

Answer 2

你可以這樣說：

//get all the ticks in x axis 
//make a pair of it refer: d3.pair 
var data = d3.pairs(svg.selectAll(".x .tick").data()); 
    //make a color category 
var c10 = d3.scale.category10(); 
//to svg append rectangles 
svg.selectAll("rect") 
    .data(data)//for the tick pair 
     .enter() 
     .append("rect") 
    .attr("class", "shading") 
    .attr("x", function(d){return x(d[0])})//x will be the 1st tick 
    .attr("y", 0) 
    .attr("width", function(d){return (x(d[1]) - x(d[0]));})//width will be the diff of 1st and 2nd tick 
    .attr("height", height) 
    .attr("opacity", 0.2) 
    .attr("fill", function(d,i){return c10(i)});//use color category to color the rects. 

工作代碼here