D3.js 在svg上居中对齐饼图

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

看到这个了吗

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

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

我将遵循这个使用硬代码宽度的示例，在我的示例中，我将最终使其响应并重新绘制屏幕调整大小事件

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

编辑

---

好的，通过检查DOM，我注意到形成每个饼图段的路径不是svg组（g）元素的子元素，而在其他示例中我看到它们是。我不知道为什么在我的例子中，这不能正常工作，但这似乎是我可以告诉你的问题，你是对的，你希望你的饼图元素是

的子元素。为此，首先将

存储在变量中，如下所示：

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

然后创建

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);

---

非常感谢，现在说得很有道理：）