D3.js在節點映射中縮放功能

目前我正在使用地圖上的節點，基於此D3.js示例http://bl.ocks.org/mbostock/2706022。D3.js在節點映射中縮放功能

現在我想使用縮放功能，但是當我將以下代碼添加此功能時，它只會在Firefox中起作用。在所有其他瀏覽器中，它不起作用。我也刪除了拖動方法。

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(d3.behavior.zoom().scaleExtent([1, 8]) 
    .on("zoom", zoom)); 

(...) 

var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    .attr("class", "node") 
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout);

所以，問題是，如果有可能兩者都使用tick和zoom功能。所以我可以瀏覽節點。

來源

2015-01-08 Jonas B

你可以做一個你自己的代碼的小提琴嗎？ –

我根據自己的代碼將它放在小提琴中。 [小提琴]（http://jsfiddle.net/gvatrgw0/） –

您需要添加一個 'G' 來適用平移和縮放變換

只需在.on("zoom", zoom))之後加上.append('g')（我相應地修改了您的fiddle）

另外建議：zoom &最好沒有這個潘工作.transition()

來源

2015-01-08 10:28:35 tato

我已添加您的建議！謝謝，它很有用。它現在運行得更順暢了。 –

有趣的是，我的正確答案第一，然後文森特編輯他的答案複製我的（你可以看到小提琴序列http://jsfiddle.net/gvatrgw0/3/後http://jsfiddle.net/gvatrgw0/2 /），並且最終接受的答案是他的，而不是我的......我可以看到，即使它錯了，也能迅速回答，然後編輯答案以複製正確的答案，而不是簡單地提出正確的答案。 – tato

我接受了您的反饋。你是對的。 –

我根據這個更改變焦功能：http://bl.ocks.org/mbostock/3680999 另外補充AG代替：

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(d3.behavior.zoom().scaleExtent([1, 8]) 
    .on("zoom", zoom)) 
    .append('g') # Append g;

http://jsfiddle.net/gvatrgw0/3/

來源

2015-01-08 10:24:32

爲什麼你不能放大'g'標籤？你能詳細說明嗎？ – tato

TY編輯。它以前沒有工作。雖然有點奇怪...... –

謝謝，這有助於。不知道我需要一個額外的'g'。 –

D3.js在節點映射中縮放功能

回答

相關問題