MorganFR MorganFR - 1 month ago 18
CSS Question

D3.js: Drawing rectangles underneath text

I am working on a radial collapsible tree in using d3.js. Here is how it looks so far: enter image description here
As you can see highlighted in red is the fact that text overlaps the links. I would like the text to be "highlighted" in the background color, so that the links will not appear where the text is.

So far, I have tried highlighting the text using background-color in CSS and in .style() of the text.

.node text {
background-color: yellow;
font: 12px sans-serif;
}


I have also tried drawing a rectangle of the size of the text before drawing the text, as seen in Mike Bostock's bar chart. However, when i execute the code, the rectangles are nowhere to be found, even in the source code via chrome's developer tool (there is a tag for the circles, but no rectangle tag).

Here is a JSFiddle of part of the code. I have made the rectangle in yellow in the CSS to see better in case it works, though i haven't been able to make it work.

The code of the rectangles are the following:

.node rect {
fill: yellow;
}

nodeEnter.select("rect")
.attr("height", 15)
.attr("width", 200)
.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; })
//.style("fill","yellow")
;


and

nodeUpdate.select("rect")
.attr("height", 15)
.attr("width", 200)
.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; })
//.style("fill","yellow")
;

Answer

You have to append the rectangle in the enter selection, not selecting it:

nodeEnter.append("rect")

Here is your fiddle: https://jsfiddle.net/wLwn9p98/

Comments