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

问题描述：

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

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

我正在使用名为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（）']（https://github.com/mbostock/d3/wiki/Zoom-Behavior#center） – 2014-09-24 21:14:14

@LarsKotthoff，它设置为一个固定点，或如果空到鼠标轮的位置。不允许从鼠标位置动态偏移。我试图在缩放（）内调用它，它不起作用。始终放大到0,0。 – glyph 2014-09-25 13:10:14

嗯，不应该太难修改源代码，并允许传递一个允许你这样做的函数。 – 2014-09-25 13:14:39

答

我能解决这个问题，而无需修改D3源通过与我的缓冲平移偏移值设置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);

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

相关推荐