0

我正在研究此 D3 代码的修改版本，用于平行坐标。我想为轴标签添加背景颜色。我意识到我无法使用 CSS 样式设置背景颜色，因为这是 SVG 文本，所以我尝试附加矩形但无济于事。这是我写的，但它没有画任何东西：

           d3.selectAll(".label")  
                      .append("rect")
                        .attr("x", function(d){ return d3.select(this).node().getBBox().x - 5;})
                        .attr("y", function(d){ return d3.select(this).node().getBBox().y - 5;})
                        .attr("width", function(d){ return d3.select(this).node().getBBox().width;})
                        .attr("height", function(d) {return d3.select(this).node().getBBox().height;})
                        .style("stroke", "black")
                        .style("fill", "yellow");

我究竟做错了什么？编辑：根据评论，我附加到父 g 而不是文本标签本身。现在代码如下所示：

  // Add an axis and title.
                 var gsvg= g.append("svg:g")
                      .attr("class", "axis")
                      .attr("id", "gsvg")
                      .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
                      .attr("transform", "translate(0,0)");

                    d3.selectAll("#gsvg")  
                      .append("rect")
                        .attr("x", function(d){ return this.parentNode.getBBox().x - 5;})
                        .attr("y", function(d, i){ return i%2 === 0 ? this.parentNode.getBBox().y - 20: this.parentNode.getBBox().y - 35;})
                        .attr("width", function(d){ return this.parentNode.getBBox().width;})
                        .attr("height", function(d) {return 20;})
                        .style("stroke", "lightgrey")
                        .style("stroke-width", 2)
                        .style("fill", function(d){
                            return self.fcolorMap[d];
                        })
                        .style("opacity", 0.5);

                    gsvg.append("svg:text")
                      .style("text-anchor", "middle")
                      .attr("y", function(d,i) { return i%2 == 0 ? -14 : -30 } )
                      .attr("x",0)
                      .attr("class", "axis-label")
                      .text(function(d) { 
                        var s = d.split("|");
                        return s[s.length-1]; });

唯一的问题是现在我需要弄清楚如何获取标签的边界框而不是轴的边界框。

4

0 回答 0