D3 circle pack - Adding labels to nodes

Question

While I've seen this question asked a few times, I'm having a bit trouble implementing. What I'd like to do is have the label attribute centered within each circle (as mentioned here). I believe I'd be adding the text attribute to:

canvas.selectAll('circles')
    .data(nodes)
    .enter()
    .append('svg:circle')
    .attr('cx', function (d) {
        return d.x;
    })
    .attr('cy', function (d) {
        return d.y;
    })
    .attr('r', function (d) {
        return d.r;
    })
    .attr('fill', function (d) {
        return d.color;
    });

But am confused on why the instructions they gave in the previous example I linked to doesn't work with the setup I currently have. I believe it's the pack option that could be throwing me off (about the difference between the two), but any further examples would be a huge help. Thanks!

Update

Thanks for the answers/suggestions, I updated the Codepen with my progress (as I needed two lines of data; should have clarified) which seems to be working well. Now this is packing into a circle - at the end of the day, I'd love for this to be packed in the actual #canvas width/height (which is a rectangle). I saw this treemap example - would that be what I'm going for here?

Demo of what I have so far

enter image description here

Not sure if I understand the question. You just need to add the `text` elements -- http://codepen.io/anon/pen/zmgHy — Lars Kotthoff, Dec 11 '13 at 19:17
Only you know what you want in the end -- we can't really tell you what you're going for. — Lars Kotthoff, Dec 11 '13 at 21:22
A bit cryptic, but yes, I'm looking for any examples of how I can pack circles in an arbitrary shape (in this case, a rectangle -> 1000x500) — Zach, Dec 11 '13 at 21:26
In this case, you should have a look at [this question](http://stackoverflow.com/questions/13339615/packing-different-sized-circles-into-rectangle-d3-js). — Lars Kotthoff, Dec 11 '13 at 21:40
That's actually the base of my code already, but as the OP mentioned, it's not actually doing anything different. So, that means a new layout would need to be created? Newer to D3, but it's hard to imagine something like this hasn't come up at least a few times to warrant a closer look at what could be done. — Zach, Dec 11 '13 at 21:49
There's no layout that allows you to pack circles into arbitrary shapes. — Lars Kotthoff, Dec 11 '13 at 21:59

score 2 · Answer 1 · answered Dec 11 '13 at 20:45

Perhaps the confusion is that you can't add labels to the circle selection (because in SVG, a circle element can't contain a text element). You need to either make a g element that contains both circle and text, or a separate selection for the text, e.g.:

canvas.selectAll('text')
    .data(nodes)
    .enter()
    .append('svg:text')
    .attr('x', function (d) {
        return d.x;
    })
    .attr('y', function (d) {
        return d.y;
    })
    // sets the horizontal alignment to the middle
    .attr('text-anchor', "middle")
    // sets the vertical alignment to the middle of the line
    .attr('dy', '0.35em')
    .text(function(d) { 
      return d.label;
    });

See the updated demo: http://codepen.io/anon/pen/djebv

D3 circle pack - Adding labels to nodes

Update

1 Answers1