D3.js D3力布局：基于当前可见视图查找相对中心

我有一个d3.js图形，它是一个强制布局设计。我允许用户在设置边界的情况下放大和缩小图形，这样他们就不能放大超过1的图像，也不能缩小超过0.1的图像。现在，当我在图形上绘制值时，我会自动将它们发送到图形的中心（基于SVG容器的高度和宽度）。这很好，直到我缩小然后放大到其他地方并绘制新节点。新节点将返回到原始中心，而不是我的新相对中心

当前缩放时的缩放方式：

function onZoom() {
    graph.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}

---

我找不到任何调用来获取图形的当前可见坐标，但即使有这些调用，如果我的SVG图形大小始终保持静态，我如何使用它们来计算图形的相对中心？

对于简单的几何缩放，从可视区域尺寸加上平移和缩放设置，可以非常简单地计算出可视区域。请记住，平移设置是（0,0）原点相对于显示器左上角的位置，因此，如果平移为（-100,50），则表示左上角位于坐标系中的（+100，-50）。同样，如果比例为2，则表示可见区域覆盖的单位数为原始宽度和高度的1/2

如何访问当前的转换

graph.attr（“transform”）

将为您提供最近设置的transform属性字符串，但是您需要使用正则表达式来访问这些数字。使用

zoom.translate（）

和

zoom.scale（）

更易于直接查询

把它们放在一起，你就可以

var viewCenter = [];

viewCenter[0] = (-1)*zoom.translate()[0] + (0.5) * (  width/zoom.scale() );
viewCenter[1] = (-1)*zoom.translate()[1] + (0.5) * ( height/zoom.scale() );

---

也就是说，可见区域中心的位置是可见区域左上角的位置，加上可见宽度和高度的一半。

我知道这篇文章很古老，但我发现它很有用。下面是D3V5的更新

var el = d3.select('#canvas').node().getBoundingClientRect();

var z = d3.zoomTransform(svg.node());
var w = el.width;
var h = el.height;

var center = {
    x: (z.x / z.k * -1) + (w / z.k * 0.5),
    y: (z.y / z.k * -1) + (h / z.k * 0.5)
};

---

然而，值得注意的是。。。我发现我还需要将平移x/y除以比例因子

z.k

。您在公式中没有这样做。

也许我误解了这一点，但在演示中，缩放似乎非常到位。您是对的，缩放工作正常。问题不在于缩放，而是相对于我被放大的位置找到图形的中心。效果很好。当我第一次开始学习D3时，我仔细阅读了这些文档，但忘记了翻译背后的确切目的和力量。谢谢！接下来如何处理这些坐标？粘贴到

.attr（'transform'，

translate（${center.x}，${center.y}）缩放（${z.k}）

）

？如果是这样，为什么它对我不起作用？代码笔：