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

Question

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

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

这一切都工作得很好，但是当我将缩放行为应用于方程时，整个事情就出现了偏差。我已将问题定位到适用于包含节点的 g 容器的 scale 值 d3.event.transform。

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

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

如果一切设置正确，您应该能够apply转换为点，

var upperRight = [lx, ly];
var lowerLeft = [lx + lw, ly + lh];

if (!!currentZoom) {
  upperRight = currentZoom.apply(upperRight);
  lowerLeft = currentZoom.apply(lowerLeft);
}