在D3.js 4.x力模拟中将选择矩形与缩放+平移相结合

Question

我在D3.js 4.4中构建了一个力模拟，它使用内置的缩放+平移函数(d3.zoom())，并结合一个用于选择节点的选择矩形(如此处或此处)。

拖动/平移视口是默认行为，但在按住Shift键时会被过滤掉。然后，另一个拖动处理程序接管并从起点绘制一个矩形。在鼠标上移时，代码将矩形与屏幕上的节点相交并选择它们。

这一切都很好，但当我将缩放行为应用于等式时，整个事情就会发生变化。我已经指出了d3.event.transform应用于包含节点的g-container的scale值的问题。

由于这个项目的性质(以及我们工作的无互联网开发环境)，我无法在网上复制/粘贴工作代码。因此，以下是导致问题的节略部分(我不得不从另一台显示器上重新键入这些)。

var currentZoom = null;
var zoom = d3.zoom()
.scaleExtent([0.5, 10])
.filter(function() {
return !d3.event.shiftKey // Don't zoom/pan when shift is pressed
})
.on("zoom", zoomed);
function zoomed() {
currentZoom = d3.event.transform;
d3.select("g.links").attr("transform", d3.event.transform);
d3.select("g.nodes").attr("transform", d3.event.transform);
}
// This fires on mouseup after dragging the rectangle (svg rect)
function intersectSelectionRect() {
var rect = svg.select("rect.selection-rect");
// Intersect rectangle with nodes
var lx = parseInt(rect.attr("x"));
var ly = parseInt(rect.attr("y"));
var lw = parseInt(rect.attr("width"));
var lh = parseInt(rect.attr("height"));
// Account for zoom
if (!!currentZoom) {
// Recalculate for pan
lx -= currentZoom.x;
ly -= currentZoom.y;
// Recalculate for zoom (scale)
// currentZoom.k ???????????????
}
// Rectangle corners
var upperRight = [lx + lw, ly];
var lowerLeft = [lx + ly + lh];
nodes.forEach(function(item, index) {
if ((item.x < upperRight[0] && item.x > lowerLeft[0]) &&
(item.y > upperRight[1] && item.y < lowerLeft[1])) {
item.selected = true;
}
});
}

正如你所能(希望)看到的，当用缩放k(比例)重新计算矩形x和y时，问题就会出现。如果刻度为1(起始值)，则重新计算是正确的。如果是其他情况，则实际的选择矩形不再与屏幕上绘制的矩形匹配。

Answer 1

如果一切设置正确，您应该能够将变换应用于点，

var upperRight = [lx, ly];
var lowerLeft = [lx + lw, ly + lh];
if (!!currentZoom) {
upperRight = currentZoom.apply(upperRight);
lowerLeft = currentZoom.apply(lowerLeft);
}