How do I position a text on top of a circle?

Question

I have code to make a circle and I'd like to place text on top of it.

I'm using this for my example: https://bl.ocks.org/mbostock/raw/7341714/

    infoHeight = 200
    infoWidth = 200

    var compareSVG = d3.select(".info-container")
                .append("svg")
                .attr("class","comparison-svg")
                .attr("width", infoWidth)
                .attr("height", infoHeight);

    var circle = compareSVG.append("g")

    circle.append("circle")
    .attr("r", circleRadius(d.properties.contextvalue))
    .attr("cy", infoHeight/2)
    .attr("cx", infoWidth/2)
    .style("fill","grey")
    .style("stroke","black")
    .style("stroke-width","3px")

    circle.append("text")
    .text(d.properties.contextvalue)
    .style("display", "block")
    .style("y", infoHeight/2)
    .style("x", infoHeight/2)
    .style("color","red")
    .style("font-size","20px")

The circle works, but the text won't appear on top of it. Instead, it is in the top left corner of the SVG element. I've tried position: absolute along with top and left and it stays in the same corner.

Answer 1

In D3, the attr methods uses Element.setAttribute internally, while style uses CSSStyleDeclaration.setProperty() .

In an SVG <text> element, x and y are attributes . Therefore, change those style() methods for attr() . Also, get rid of that .style("display", "block") .

So, it should be:

circle.append("text")
    .text(d.properties.contextvalue)
    .attr("y", infoHeight/2)
    .attr("x", infoHeight/2)
    .style("color","red")
    .style("font-size","20px")

Here is your code with that change:

 infoHeight = 200 infoWidth = 200 var compareSVG = d3.select("body") .append("svg") .attr("width", infoWidth) .attr("height", infoHeight); var circle = compareSVG.append("g") circle.append("circle") .attr("r", 50) .attr("cy", infoHeight / 2) .attr("cx", infoWidth / 2) .style("fill", "lightgrey") .style("stroke", "black") .style("stroke-width", "3px") circle.append("text") .text("Foo Bar Baz") .attr("y", infoHeight / 2) .attr("x", infoHeight / 2) .style("color", "red") .style("font-size", "20px")

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Finally, pay attention to the position of the text: it's not entered (regarding the circle). If you want to center it, use text-anchor and dominant-baseline :

 infoHeight = 200 infoWidth = 200 var compareSVG = d3.select("body") .append("svg") .attr("width", infoWidth) .attr("height", infoHeight); var circle = compareSVG.append("g") circle.append("circle") .attr("r", 50) .attr("cy", infoHeight / 2) .attr("cx", infoWidth / 2) .style("fill", "lightgrey") .style("stroke", "black") .style("stroke-width", "3px") circle.append("text") .text("Foo Bar Baz") .attr("y", infoHeight / 2) .attr("x", infoHeight / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .style("color", "red") .style("font-size", "20px")

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>