Javascript D3.js：将响应饼图置于其父div的中心

我知道当我想出来的时候，我可能会面朝手掌，但我正试图将一个反应灵敏的饼图水平居中（不管它的大小）。我一定是疯了，因为我在挣扎，尽管我知道解决办法应该很简单

谢谢你怜悯我

一些CSS：

.chart-container {
  width:100%;
  height:50%;
  border: 1px dotted silver;
}

您需要删除第19行的PreserveSpectratio attr。（响应性工作）

$（函数（）{
var$container=$（'.chart container'），
τ=2*Math.PI，
宽度=$container.width（），
高度=$container.height（），
外层=数学最小值（宽度、高度）/2，
内半径=（外半径/5）*4，
fontSize=（数学最小值（宽度、高度）/4）；
var arc=d3.svg.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）
.startAngle（0）；
var svg=d3.select（“.chart container”）.append（“svg”）
.attr（“宽度”，“100%”）
.attr（“高度”，“100%”）
.attr（'viewBox'，'0'+数学最小值（宽度，高度）+''+数学最小值（宽度，高度））
//.attr（'preserveAspectRatio'，'xMinYMin'）
.附加（“g”）
.attr（“转换”、“转换”（+Math.min（宽度、高度）/2+）、“+Math.min（宽度、高度）/2+”）；
var text=svg.append（“文本”）
.text（'0%”）
.attr（“文本锚定”、“中间”）
.style（“字体大小”，字体大小+'px'）
.attr（“dy”，字体大小/3）
.attr（“dx”，2）；
var background=svg.append（“路径”）
.基准面（{端角：τ}）
.样式（“填充”、“7cc35f”）
.attr（“d”，弧）；
var front=svg.append（“路径”）
.基准面（{端角：0*τ}）
.样式（“填充”、“#57893e”）
.attr（“d”，弧）；
setInterval（函数（）{
foreground.transition（）
.持续时间（750）
.call（arcTween，Math.random（）*τ）；
}, 1500);
函数arcTween（过渡，新角度）{
转换属性（d），函数（d）{
var interpolate=d3.interpolate（d.endAngle，newAngle）；
返回函数（t）{
d、 端角=内插（t）；
text.text（数学圆整（（d.endAngle/τ）*100）+'%'）；
返回弧（d）；
};
});
}
});
html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.图表容器{
宽度：100%；
身高：50%；
边框：1件银点；
}
svg文本{
字号：1em；
字体系列：无衬线；
}

这很有效！“xMidYMin”用于
保存Aspectratio
。我不完全明白你的解决方案为什么有效，但它确实有效。所以，谢谢你。
var svg = d3.select('.chart-container').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
    //.attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");