在 D3.js 中如何将 <g> 置于 <svg> 中？

Question

我正在尝试将一个内部有 d3 树的组居中。svg 目前在浏览器中完美定位，我只是想让动态加载的树保持在该 svg 元素的中心。所有树元素都在一组内，并具有缩放侦听器并具有平移功能。

<svg width="1535" height="685" overflow-y="hidden" class="overlay">
    <g transform="translate(742.5,342.5)scale(1)">
        <g class="node" transform="translate(0,25)">
          <circle class="nodeCircle" r="4.5" style="fill: rgb(255, 255, 255)</circle>
          <text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
          <text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
        </g>
    </g>
</svg>

Answer 1

我希望你理解这个概念

首先你绘制宽度：1535和高度：685的svg，你想在它的中间制作g元素

中间表示宽度的一半（1535/2）和高度的一半（685/2） w:767.5 h:342.5

你画出 g 并对其进行变换。好点，但你必须将变换设置到正确的位置，这意味着在 svg 的中间设置为 742.5 和 342.5

所以这意味着你需要变换 x,y) 更多 (25,0)

为什么你设置错误

<g class="node" transform="translate(0,25)">

一定是

 <g class="node" transform="translate(25,0)">

这是一个小例子

<g class="node" transform="translate(0,25)">