向D3.js条形图添加自定义背景

Question

我是d3.js的新手，我正在D3.js中建立一个条形图。

我正在尝试使背景有三种不同的颜色将x轴分成不同的三个区域（低，中和高）。我想我应该添加一些<g>元素，但我不确定如何将它们放在这种情况下。

该网站已上线here：

不确定提供更多代码是否有帮助

Answer 1

这个答案是基于Josh在评论中提出的建议，但我认为我会添加我的代码，因为我还必须处理鼠标悬停，所以这也带来了一些额外的挑战。

有一点值得一提的是，没有带有SVG的z-index，所以你必须先放入新的背景色调，然后再做图表栏（这也是为什么你必须为栏提供矩形的原因）根据乔希的建议，绘制一个新名称

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