滚轮变焦中心的d3.behavior.zoom动态偏移量

Question

是否有人知道如何动态修改d3.behavior.zoom的中心属性，以便鼠标轮缩放到一个点，通过指定的x值和y值偏移鼠标位置？

缩放仍然应该像往常一样跟踪鼠标位置，但由动态生成的值抵消。

我使用一个名为webcola的库来处理节点树状图中的多个坐标空间，该库扩展了d3。为了实现平移/缩放之外的平滑的节点拖动，在节点拖动之后，我对坐标进行了缓冲转换和合并。(而不是使用没有在cola中实现的stopPropagation()方法)。

网络拖动+ pan修复工作，但这抵消了d3.behavior.zoom中心。现在，我希望用指定的x和y来偏移鼠标轮上的缩放目标，以恢复鼠标轮缩放上正确的光标跟踪。

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

此偏移量目标应在节点的pan/拖动上动态更新。

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

谢谢

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