d3.behavior.zoom 鼠标滚轮缩放中心的动态偏移答案

【问题标题】：d3.behavior.zoom dynamic offset of mousewheel zoom centerd3.behavior.zoom 鼠标滚轮缩放中心的动态偏移
【发布时间】：2014-09-24 19:58:31
【问题描述】：

有谁知道如何动态修改 d3.behavior.zoom 的 center 属性，以便鼠标滚轮缩放到从鼠标位置偏移指定 x 和 y 值的点？

缩放仍应像往常一样跟踪鼠标位置，但会通过动态生成的值进行偏移。

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

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

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

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

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

谢谢

【问题讨论】：

zoom.center()
@LarsKotthoff 将其设置为固定点，或者如果为 null 则设置为鼠标滚轮位置。不允许从鼠标位置动态偏移。我尝试在 zoomed() 中调用它，但它不起作用。始终缩放到 0,0。
嗯，修改源代码并允许传递允许您这样做的函数应该不会太难。
@LarsKotthoff 也许可以，但希望有一种方法可以不诉诸于此。
啊，有趣。我会将处理程序附加到单击和滚轮事件，因为这些事件会触发缩放并且不会持续更新中心（这可能会降低性能）。

标签： javascript d3.js zooming

【解决方案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);

【讨论】：