javascript - D3 circle pack - 向节点添加标签

Question

虽然我已经看到这个问题被问过几次，但我在实现时遇到了一些麻烦。我想要做的是让 label 属性在每个圆圈内居中(如前所述 here )。我相信我会将文本属性添加到:

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