將自定義背景添加到D3.js條形圖

Question

我對d3.js相當陌生，並且正在D3.js中構建條形圖。

我試圖讓背景三種不同的顏色將x軸分成不同的三個區域（低，中，高）。我想我應該附加一些<g>元素，但我不知道如何在這種情況下放置它們。

該網站是高達here：

不知道是否提供更多的代碼，將有助於

Answer 1

這個答案是基於什麼喬希的意見建議，但我想我會添加我的代碼，因爲我也必須處理一個鼠標懸停，所以這也創造了一些額外的挑戰。

有一點值得一提的是，沒有一個z-index與SVGs，所以你必須先把新的背景色調，然後做圖表欄（這也是爲什麼你必須給矩形的條形圖一個新的名字，按照Josh的建議）

 svg.append("rect") 
      .attr("y", padding) 
      .attr("x", padding) 
      .attr("width", 200) 
      .attr("height", h -padding*2) 
      .attr("fill", "rgba(0,255,0, 0.3") 
      .attr("class", "legendBar") 

     svg.append("rect") 
      .attr("y", padding) 
      .attr("x", padding +200) 
      .attr("width", 200) 
      .attr("height", h -padding*2) 
      .attr("fill", "rgba(0,0,255, 0.3") 
      .attr("class", "legendBar") 

     svg.append("rect") 
      .attr("y", padding) 
      .attr("x", padding +400) 
      .attr("width", 200) 
      .attr("height", h -padding*2) 
      .attr("fill", "rgba(255,0,0, 0.3") 
      .attr("class", "legendBar") 

     svg.selectAll("rect.bars") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("class", "bars") 
      .attr("x", 0 + padding) 
      .attr("y", function(d, i){ 
       return yScale(i); 
      }) 
      .attr("width", function(d) { 
       return xScale(d.values[0]); 
      }) 
      .attr("height", yScale.rangeBand()) 



.on("mouseover", function(d){ 

       var yPosition = parseFloat(d3.select(this).attr("y")) + yScale.rangeBand() /2 
       var xPosition = parseFloat(d3.select(this).attr("x")) /2 + w /2; 

       d3.select("#tooltip") 
        .style("left", "660px") 
        .style("top", "140px") 
        .select("#strat") 
        .text(d.values[3]); 

       d3.select("#tooltip") 
        .select("#graph") 
        .attr("src", "img/cpg.jpg"); 

       d3.select("#tooltip") 
        .select("#studentName") 
        .text(d.name); 

       d3.select("#tooltip").classed("hidden", false); 
      }) 

      .on("mouseout", function() { 
       d3.select("#tooltip").classed("hidden", true); 
      });