1

虽然我已经多次看到这个问题，但我在实施时遇到了一些麻烦。我想做的是将label属性集中在每个圆圈内（如此处所述）。我相信我会将 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是可能让我失望的选择（关于两者之间的区别），但任何进一步的例子都会有很大的帮助。谢谢！

更新

感谢您的回答/建议，我用我的进度更新了 Codepen（因为我需要两行数据；应该已经澄清），这似乎运行良好。现在这是包装成一个圆圈 - 在一天结束时，我希望它被包装成实际的#canvas宽度/高度（这是一个矩形）。我看到了这个树形图示例 - 这就是我想要的吗？

到目前为止我所拥有的演示

在此处输入图像描述

4

1 回答 1

2

也许令人困惑的是您不能为圆圈选择添加标签（因为在 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

于 2013-12-11T20:45:18.317 回答