logo标签列表

如何在D3.js中使<g>居中于<svg>中？

javascripthtmlcssd3.jssvg
6

我正在尝试将一个包含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>
2
如果你不展示你的代码（一个[MCVE]），这里没有人会帮助你。 - Gerardo Furtado
更新了我的原始评论。 - Nick
1个回答
2
我希望您能理解这个概念。
首先，您需要绘制宽度为1535和高度为685的SVG图形。
您想在其中间创建一个g元素。
"其中间"指的是宽度的一半（1535/2）和高度的一半（685/2），即w:767.5 h:342.5。
您绘制了g并对其进行了变换。这是不错的，但是您必须将变换设置到正确的位置，也就是位于SVG的中心742.5和342.5处。
因此，这意味着您需要更多地变换（25,0）。
为什么您把它设置错误了呢？
<g class="node" transform="translate(0,25)">

必须是IT相关的

 <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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接