你如何在 D3.js 中的 <svg> 中将 <g> 居中？答案

【问题标题】：How do you center a <g> within a <svg> in D3.js?你如何在 D3.js 中的 <svg> 中将 <g> 居中？
【发布时间】：2017-09-06 00:25:48
【问题描述】：

我正在尝试使一个内部有 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>

【问题讨论】：

如果您不显示您的代码（minimal reproducible example），这里没有人会帮助您。
更新了我原来的评论

标签： javascript html css d3.js svg

【解决方案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)">

这是一个小例子

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>


  svg{
        border-style: solid;
    border-color: red;
  }

}

</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <svg width="200" height="100" overflow-y="hidden" class="overlay">
    <g transform="translate(70,20)scale(1)">
        <g class="node" transform="translate(30,30)">
          <circle class="nodeCircle" r="10" style="fill: black"</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>
  
    <svg width="200" height="100" overflow-y="hidden" class="overlay">
    <g transform="translate(100,50)scale(1)">
        <g class="node" transform="translate(0,0)">
          <circle class="nodeCircle" r="10" style="fill: black"</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>
  
  <br/>
  
 <svg width="200" height="100" overflow-y="hidden" class="overlay">
    <g transform="translate(200,50)scale(1)">
        <g class="node" transform="translate(0,0)">
          <circle class="nodeCircle" r="10" style="fill: black"</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>
  
   <svg width="200" height="100" overflow-y="hidden" class="overlay">
    <g transform="translate(100,10)scale(1)">
        <g class="node" transform="translate(100,40)">
          <circle class="nodeCircle" r="10" style="fill: black"</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>
</body>

【讨论】：