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

问题

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 the circle. Thank you very much.

  svg = d3.select(selector)
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  // Bind nodes data to what will become DOM elements to represent them.
  bubbles = svg.selectAll('.bubble')
    .data(nodes, function (d) { return d.id; });

  // Create new circle elements each with class `bubble`.
  // There will be one circle.bubble for each object in the nodes array.
  // Initially, their radius (r attribute) will be 0.



  bubbles.enter().append('circle')
    .classed('bubble', true)
    .attr('r', 0)
    .attr('fill', function (d) {  return  fillColor(d.group); })
    .attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
    .attr('stroke-width', 2)
    .on('mouseover', showDetail)
    .on('mouseout', hideDetail);


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

回答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/

来源：https://stackoverflow.com/questions/44339929/put-text-in-the-middle-of-a-circle-using-d3-js

标签

javascript

d3.js