在 svg 上居中对齐饼图

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

看到这个fiddle http://jsfiddle.net/2qeab2ds/1/

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

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

我正在关注这个例子here http://zeroviscosity.com/d3-js-step-by-step/step-1-a-basic-pie-chart，它使用硬代码宽度，在我的例子中，我最终将使其响应并在屏幕调整大小事件上重新绘制。

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

EDIT

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

你是对的，你希望你的饼图元素成为<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);