d3.js - 在 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>作为 g 的 child :

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