html - カスタム背景を D3.js 棒グラフに追加する

Question

私は d3.js を初めて使用し、D3.js で棒グラフを作成しています。

背景を 3 つの異なる色にして、x 軸を異なる 3 つのゾーン (低、中、高) に分割しようとしています。いくつかの要素を追加する必要があると思い<g>ますが、この場合の配置方法がわかりません。

サイトはここにあります：

さらに多くのコードを提供することが役立つかどうかわからない

Answer 1

この回答は、ジョシュがコメントで提案したことに基づいていますが、マウスオーバーも処理する必要があったため、コードを追加すると思いました。これにより、いくつかの追加の課題も作成されました。

言及する価値のあることの 1 つは、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);
            });