代码之家 › 专栏 › 技术社区 › iamcootis

d3-Re-SVG中元素的中心群

svg d3.js

iamcootis · 技术社区 · 7 年前

我有一个svg,如下所示:

它基本上是一个网络图,由能够平移和缩放的节点和链接组成。比如说,我不小心把整个组拖离了屏幕。对我来说,让我的团队重新集中精力以便我能再次看到它的最好方法是什么?

我试着做了一个转换,并改变了比例值,但事情仍然会在视图之外。

 this.zoomTrans.scale = this.zoomTrans.scale - .1;
  this.container.attr('transform', 'translate(' + this.zoomTrans.x + ',' + this.zoomTrans.y + ') scale(' + this.zoomTrans.scale + ')');

1 回复 | 直到 7 年前

Sulthan 7 年前

在大多数情况下 d3 从原点开始生成点 (0, 0) 这显然也是默认的翻译。移回 (0,0) 因此,你应该回到图表的可见部分。

要使图表真正居中,您需要计算中心点,这通常是通过计算 minX , maxX , minY 和 maxY 从你的观点出发然后计算 (minX + maxX) / 2 和 (minY + maxY) / 2 把那个点放在你窗户的中心。

一个更高级的解决方案是跟踪翻译并以图表永远不会离开屏幕的方式限制它。同样,需要坐标的最小值和最大值。最小水平平移为 -maxX 最大水平平移是 windowWidth + minX . 如果“缩放”不等于1,则只需将限制与缩放正确相乘。

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

3 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

7 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

7 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

7 年前

MTT · 最适合散点图的回归

7 年前

Cyley Simon · 以chile/name格式将Csv转换为json

7 年前

Himani · 线图和面积图之间的颜色不同

7 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

7 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

7 年前