將Pan Zoom添加到d3js force定向

我正在慢慢地用d3.js製作一個工作流設計器。我試圖從樣本中添加平移/縮放行爲。任何想法如何得到這個工作？我已經部分工作，非常粗暴地與可怕的抖動，但在我的沮喪，我修改它沒有保存，雖然它很差無論如何。將Pan Zoom添加到d3js force定向

工作流程進展

http://jsfiddle.net/3ckG5/27/

平移/縮放例如

http://bl.ocks.org/benzguo/4370043

鼠標按下

if (!mousedown_node && !mousedown_link) { 
    // allow panning if nothing is selected 
    svg.call(d3.behavior.zoom().on("zoom"), rescale); 
    return; 
    }

鼠標釋放

if (!mousedown_node && !mousedown_link) { 
    // allow panning if nothing is selected 
    force.start(); 
    svg.call(d3.behavior.zoom().on("zoom"), null); 
    return; 
    }

附加事件

創建的力向圖的背景。

var svg = d3.select('body') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height);

呼叫變焦功能的行爲

svg.call(d3.behavior.zoom().on("zoom", rescale)) 
    .on("dblclick.zoom", null) 
    .on("mousemove", mousemove) 
    .on("mousedown", mousedown) 
    .on("mouseup", mouseup);

回撥變焦事件

// rescale g 
function rescale() { 
    var trans=d3.event.translate; 
    var scale=d3.event.scale; 

    svg.attr("transform", 
     "translate(" + trans + ")" 
     + " scale(" + scale + ")"); 
}

來源

2014-04-07 WebSight

你正在運行到的問題是，您要翻譯和縮放你的SVG畫布，並且真正想要做的是翻譯和縮放包含網絡的ag元素。

請記住，當您縮放該g元素時，它會縮放其中每個元素的筆畫寬度，因此您需要根據當前縮放級別重新調整筆畫寬度（只需將當前刻度值除以所需的筆劃寬度）。

你可以看到一個正在與力佈局平移和縮放，這確實在這裏： http://bl.ocks.org/emeeks/9357371

來源

2014-04-08 04:24:51 Elijah

感謝您對這個新的例子。 – WebSight

並且感謝你們正在放在一起的全面的[書籍]（http://www.manning.com/meeks/）。我已經有我的副本:-) – FernOfTheAndes

嗨，謝謝你的例子。我仔細研究過，看到有些東西不見了。在強制圖的原始示例中，您可以抓住一個點並對其進行拉伸。 – yccteam

將Pan Zoom添加到d3js force定向

回答

相關問題