D3 circle pack - 向节点添加标签

Question

虽然我已经看过几次问这个问题，但实施起来有点麻烦。我想要做的是在每个圆圈中居中label属性（如上所述here）。我相信我会将text属性添加到：

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;
    });

但我很困惑为什么他们在上一个我链接的示例中给出的说明不适用于我目前的设置。我相信这是pack选项可能会让我失望（关于两者之间的差异），但任何进一步的例子都将是一个巨大的帮助。谢谢！

更新

感谢您的回答/建议，我更新了the Codepen我的进度（因为我需要两行数据;应该澄清），这似乎运作良好。现在这是一个圆圈 - 在一天结束时，我喜欢这个包装在实际的#canvas宽度/高度（这是一个矩形）。我看到了this treemap例子 - 这就是我要去的地方吗？

Demo of what I have so far

Answer 1

也许令人困惑的是，您无法在圆圈选择中添加标签（因为在SVG中，circle元素不能包含text元素）。您需要创建一个包含圆圈和文本的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;
    });

请参阅更新后的演示：http://codepen.io/anon/pen/djebv