将 D3 饼图置于 div 的中心，尊重它的尺寸

Question

我在将我在 D3 中创建的饼图置于其父对象 div 中心时遇到了一些困难。我在这里设置了一个 JS-fiddle：https://jsfiddle.net/86czgLnu/

问题是它溢出了它的父尺寸，我希望它缩放以适合并位于父尺寸的中心。我找到了有关 preserveAspectRatio 和 viewBox 的文档，但无法用它们修复它。

All the code is in the fiddle

感谢观看。

Answer 1

很遗憾，您不能在 translate 中使用百分比。最好的办法是使用 JS（在你的情况下是 D3）来获取容器的大小并适当地平移组，将其宽度减半。

这是带有翻译绝对值的 SVG：

<div class="js-graph ct-chart">
    <svg width="100%" height="100%">
        <g transform="translate(50,50) scale(0.2)">
            <path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
            <path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
            <path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
        </g>
    </svg>
</div>

另一种按百分比模拟翻译的方法是使用内部 SVG，如 Robert Longson 在 this answer 中所述。但是，它不会起作用，因为饼图是在原点绘制的：

<div class="js-graph ct-chart">
    <svg width="100%" height="100%">
        <svg x="50%" y="50%">
            <g transform="scale(0.2)">
                <path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
                <path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
                <path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
            </g>
        </svg>
    </svg>
</div>

PS：scale 是 "transform" 属性的一部分。

将 D3 饼图置于 div 的中心，尊重它的尺寸

Center D3 Piechart in the center of a div, respecting it's dimensions

svg

d3.js

pie-chart