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

Question

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

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

Сайт находится здесь:

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

Answer 1

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

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

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