中心对齐svg上的饼图

Question

我想获得一个饼图的例子来工作，由此图表的位置在它的包含元素中心对齐，只是一个简单的div在这种情况下设置为使用100％宽度可用。

看到这个fiddle

正如你可以看到图表的中心定位于div的左上角，而不是使用现有的宽度和高度的中心点为每变换属性我设置：

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

我下面这个例子here，它使用硬编码的宽度，在我的情况下，我最终将会使其响应和重新绘制在屏幕上调整事件。

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

EDIT

行，从检查DOM我注意到路径的形成每个馅饼段不是SVG组的儿童（克）元件，而在其它实施例中我看到它们。我不知道为什么这在我的情况下不能正常工作，但这似乎是我所知道的问题

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