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

感謝

來源

2014-09-24 glyph

['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);

來源

2014-09-30 18:43:37 glyph

d3.behavior.zoom鼠標滾輪縮放中心的動態偏移

回答

相關問題