1

I am trying to modify a code, and in the modifications that I have made, I have not been able to put a text in the middle of a circle. I've tried many things, and I've seen several examples but it does not work for me. How can I do it? I know it should be done in this piece, and I add a text tag but it does not work.

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', function(){})
.on('mouseout', function(){});

http://plnkr.co/edit/2BCVxQ5n07Rd9GYIOz1c?p=preview

yavg
  • 2,761
  • 7
  • 45
  • 115

1 Answers1

1

Create another selection for the texts:

var bubblesText = svg.selectAll('.bubbleText')
    .data(nodes, function(d) {
        return d.id;
    });

bubblesText.enter().append('text')
    .attr("text-anchor", "middle")
    .classed('bubble', true)
    .text(function(d) {
        return d.name
    })

And move them inside the tick function.

Here is the updated plunker: http://plnkr.co/edit/UgDjqNhzbvukTWU6J9Oy?p=preview

PS: This is a very generic answer, just showing you how to display the texts. This answer doesn't deal with details like size or transitions, which are out of the scope of the question and that you'll have to implement yourself.

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • Great, I have a question, what exactly is this line used for? And another thing I want to know, is how to put a certain size of text for the smaller circles. (Would be great to calculate that they do not exceed the size of the circle and thus determine the appropriate size ..) manyisimas thanks. you are Latin? – yavg Jun 06 '17 at 04:14
  • As I told you in my post scriptum, these are different issues, and it's a better idea if you post a different question regarding the text size. Regarding the line, you didn't told me what line you're talking about (and if you meant "latino", yes, I am). – Gerardo Furtado Jun 06 '17 at 04:20
  • I forgot to tell you what line, I speak Spanish, in an upcoming occasion, could we understand each other in our native language? I'm not very good with English.. bubblesText = svg.selectAll('.bubbleText') .data(nodes, function (d) { return d.id; }); – yavg Jun 06 '17 at 04:24
  • I just copied your circles selection, that is what we call an "update" selection. StackOverflow is English only, pero hay una versión del SO en español: https://es.stackoverflow.com/ – Gerardo Furtado Jun 06 '17 at 04:29