在SVG上居中对齐饼图

Question

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

看到这个小提琴

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

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

我在这里遵循此示例，该示例使用硬代码宽度，在本例中，我将使其响应并在屏幕调整大小事件上重新绘制。

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

编辑

好的，通过检查DOM，我注意到形成每个饼图段的路径都不是svg group（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);