Put text in the middle of a circle using. d3.js

Question

I have this piece of code in which circles are drawn, I need to put a text inside each circle, I would also like to know how I can put a certain size to each of the elements of

Answer 1

A good practice would be to create a group element for each bubble because they will be composed of two elements - a circle and text.

// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
  .data(nodes, function(d) {
    return d.id;
  })
  .enter()
  .append('g')
  .attr("transform", d => `translate(${d.x}, ${d.y})`)
  .classed('bubble', true)
  .on('mouseover', showDetail)
  .on('mouseout', hideDetail)

After that, circles and texts can be appended:

circles = bubbles.append('circle')
  .attr('r', 0)
  .attr('stroke-width', 2)


texts = bubbles.append('text')
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .style('font-size', d => d.radius * 0.4 + 'px')
  .attr('fill-opacity', 0)
  .attr('fill', 'white')
  .text(d => d.text)

// Fancy transition to make bubbles appear, ending with the
// correct radius
circles.transition()
  .duration(2000)
  .attr('r', function(d) {
    return d.radius;
  });

For hiding/showing text, you can use fill-opacity attribute and set it 0 when the text should be hidden, and 1 if it should be shown:

function showDetail(d, i) {
  d3.select(this.childNodes[1]).attr('fill-opacity', 1)
}

function hideDetail(d, i) {
  d3.select(this.childNodes[1]).attr('fill-opacity', 0)
}

example: https://jsfiddle.net/r880wm24/