在 svg 上居中对齐饼图

Question

我试图让一个饼图示例工作，其中图表的位置在它的包含元素内居中对齐，在这种情况下只是一个简单的 div 设置为使用 100% 可用宽度。

看到这个fiddle

如您所见，图表的中心位于 div 的左上角，而不是根据我设置的变换属性使用可用宽度和高度的中心点：

.attr('transform', 'translate(' + width / 2 +  ',' + height / 2 + ')');

我正在关注这个示例here，它使用硬代码宽度，在我的情况下，我最终将使其响应并在屏幕调整大小事件上重新绘制。

为了防止从 div\svg 区域的中心点绘制图表，我做错了什么或完全错过了什么？

编辑

好的，通过检查 DOM，我注意到形成每个饼图段的路径不是 svg 组 (g) 元素的子元素，而在其他示例中我看到它们是。我不确定为什么在我的情况下这不能正常工作，但这似乎是我能说的问题

Answer 1

您希望饼图元素成为<g> 的子元素，这是对的。为此，首先将<g> 存储在一个变量中，如下所示：

var g = svg.attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width/2 +  ',' + height/2 +')');

然后将<path>s 创建为g 的子代：

var path = g.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);