How to add text to svg circle in d3

Question

I have the following code and I would like to add text in the circles. How could I make it possible; I have looked at these possible duplicates

Insert text inside Circle in D3 chart

 const link = svg.append("g")
    .attr("stroke", "#999")
    .attr("stroke-opacity", 0.6)
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke-width", d => Math.sqrt(d.value));

// link.append("title").text(d => d.value);

const node = svg.append("g")
    .attr("stroke", "#fff")
    .attr("stroke-width", 1.5)
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", d => color(d.group))
    .call(drag(simulation));

node.append("title").text(d => "Node: " + d.id);

function ticked() {
    link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

    node
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
}

Answer 1

There are numerous ways to add text labels to circles. In your code, you've added title elements to the circles, which usually show up as tooltips when you hover over the element. Unlike title elements, text elements cannot be added as children of the circle elements. One common way to handle them is to use g elements to group together the circle and the related text , so that you can then perform any transformations (or removals, etc.) on the g instead of having to apply them separately to text and circle .

To convert your code sample, first, I've altered the selectAll / enter code to act on g elements instead of circles:

const node = svg
  [...]
  .selectAll('.circle')
  .data(nodes)
  .enter()
  .append('g')  // for each item in nodes, add <g class='circle'>
  .classed('circle', true)

You can then append the circle and text elements to node :

node
  .append("circle")
  .attr('r', 5)

node
  .append("text")
  .text(d => "Node: " + d.id)

See the code snippet for a full example.

 var nodes = [{ "x": 80, "y": 60, id: 'foo' }, { "x": 20, "y": 70, id: 'bar' }, { "x": 40, "y": 40, id: 'baz' }, { "x": 50, "y": 90, id: 'bop' }]; const svg = d3.select('svg') const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll(".circle") .data(nodes) .enter() .append('g') .classed('circle', true) .attr('transform', d => 'translate(' + dx + ',' + dy + ')'); node .append("circle") .attr("r", 5) .attr("fill", 'deepskyblue') // .call(drag(simulation)); node .append("text") .classed('circleText', true) .attr('dy', '0.35em') .attr('dx', 5) .text(d => "Node: " + d.id); 

 svg .circleText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; fill: black; stroke-width: 0; } 

 <script src="http://d3js.org/d3.v5.js"></script> <svg width="200" height="200"></svg>