CODEWITHSUNDEEP
javascriptcssd3.jssvg
MorganFR
MorganFR

Reputation: 341

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 <circle> 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")
;

Upvotes: 1

Views: 518

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

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

nodeEnter.append("rect")

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

Upvotes: 1

Related Questions