中心在svg

Question

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

请参阅此fiddle

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

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

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

我做错了什么，或完全错过了什么，以防止图表从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>作为g的孩子：

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