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

Question

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

我现在缩放时如何缩放：

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

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

Answer 1

我知道这篇文章已经很老了，但我发现它很有用。以下是 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。哪一个，你没有在你的公式中做。

Answer 2

对于简单的几何缩放，从可见区域尺寸以及平移和缩放设置中计算出可见区域是相当简单的。请记住，平移设置是（0,0）原点的位置相对于您的显示器的左上角，所以如果平移是（-100,50），这意味着左上角角在您的坐标系中位于 (+100,-50) 处。同样，如果比例为 2，则表示可见区域覆盖的单位是原始宽度和高度的 1/2。

如何访问当前的转换？ graph.attr("transform") 将为您提供最近设置的转换属性字符串，但是您需要使用正则表达式来访问这些数字。直接使用zoom.translate() 和zoom.scale() 更容易查询zoom behaviour。

把它们放在一起，你会得到

var viewCenter = [];

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

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