Question

我在使用D3创建的饼图中心时遇到了一些困难。我在这里设置了一个JS小提琴：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的中心，尊重它的尺寸

1 个答案: