Question

我在D3.js 4.4中构建了一个Force Simulation，它使用内置的zoom + pan函数（d3.zoom()），结合选择矩形来选择节点（如here或{ {3}}）。

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

这一切都很好，但是当我将变焦行为应用于等式时，整个事情就会横向移动。我已将问题精确定位到scale值d3.event.transform适用于包含节点的g容器。

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

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);
}

在D3.js 4.x力模拟中组合选择矩形和缩放+平移

1 个答案: