Добавление пользовательских фонов в гистограмму D3.js

Question

Я довольно новичок в d3.js, и я строю гистограмму в D3.js.

Я пытаюсь сделать фон тремя разными цветами, чтобы разбить ось х на отдельные три зоны (низкий, средний и высокий). Я полагаю, что я должен добавить некоторые элементы <g>, но я не уверен, как их разместить в этом случае.

Сайт до here:

Не уверен, что если предоставление больше кода поможет

Answer 1

Этот ответ основан на том, что предложил Джош в комментариях, но я думал, что добавьте мой код, так как мне также пришлось иметь дело с наведением мыши, и поэтому это создало дополнительные проблемы.

Следует упомянуть о том, что нет индекса z с SVG, поэтому сначала нужно поместить новые оттенки фона, а затем сделать диаграммы (и поэтому вы должны дать прямоугольники для бар картировать новое имя, согласно предложению Джоша)

 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); 
      });