D3力布局：根据当前可见视图查找相对中心

Question

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

我现在缩放时如何缩放：

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

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

Answer 1

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

如何访问当前的转型？ graph.attr("transform")将为您提供最近设置的转换属性字符串，但是您需要使用正则表达式来访问这些数字。使用zoom behaviour和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() );

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

Answer 2

我知道这篇文章很老，但我发现它很有用。以下是d3 v5的更新。

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。哪个，你没有在你的公式中做。