d3.行为缩放鼠标滚轮缩放中心的动态偏移

d3.behavior.zoom dynamic offset of mousewheel zoom center

本文关键字：缩放 动态 鼠标 d3      更新时间：2023-09-26

有人知道如何动态修改d3.behaviorZoom的中心属性，以便将鼠标滚轮缩放到与鼠标位置偏移指定x和y值的点吗？

缩放应该仍然像往常一样跟踪鼠标位置，但会被动态生成的值偏移。

我正在使用一个名为webcola的库处理节点树图中的多个坐标空间，该库扩展了d3。为了在平移/缩放之外实现平滑的节点拖动，我缓冲了平移坐标，并在节点拖动后合并它们。（而不是使用未在cola中实现的stopPropagation（）方法）。

网络拖动+平移修复是可行的，但会偏移d3.behaviorZoom中心。现在，我想将鼠标滚轮上的缩放目标偏移指定的x和y，以恢复鼠标滚轮缩放上的正确光标跟踪。

例如，如果鼠标位于位置100100，但坐标空间移动了50，50，则鼠标滚轮应缩放到150150，而不是实际的鼠标位置100100。

该偏移目标应在节点平移/拖动时动态更新。

    function zoomCoords() {
        // generate the zoom coords based on the merged coordinate space - doesn't work
        console.log("d3.mouse");
            console.log(d3.mouse);
            return [0,0];
        }
    var zoom = d3.behavior.zoom()
        .scaleExtent([0.2, 3])
        // .center(zoomCoords()) // set dynamically ??? 
        .on("zoom", zoomed);
    svg.call(zoom);


    function zoomed() {
        if (enablePanning === true) {
            // we're dragging on the background, not a node.
            // zoom.center=newCoords; // doesn't work       
            // zoom.center(newCoords); // doesn't work              
            newCoords=[(d3.event.translate[0]-translateBuffer[0]),(d3.event.translate[1]-translateBuffer[1])];              
            container.attr("transform", "translate(" + newCoords + ")scale(" + d3.event.scale + ")");
        } else {
            // dragging on a node. save the translation to apply to the next container drag
            translateBuffer[0]=(d3.event.translate[0]-newCoords[0]);
            translateBuffer[1]=(d3.event.translate[1]-newCoords[1]);
        }
    }

感谢

我能够在不修改d3源的情况下解决这个问题，方法是在mousemove上使用每个节点拖动事件的缓冲平移偏移值设置zoom.center。

    function mouseMove() {
        m = d3.mouse(this);
        // apply the translate buffer so mousewheel zooms on the correct point after dragging the graph
        pt=[ m[0]+translateBuffer[0], m[1]+translateBuffer[1] ];
        zoom.center(pt);
    }

    var zoom = d3.behavior.zoom()
        .scaleExtent([0.2, 3])
        .on("zoom", zoomed);
    svg.call(zoom)
        .on('mousemove', mouseMove);
相关文章：