D3力圖未按預期平移或縮放

Question

我主要基於這些非常有用的示例構建了D3力圖。

我想添加平移和縮放功能，我嘗試使用另一個示例來完成此操作（看起來我只能包含兩個鏈接，但是Google可以通過“ d3強制縮放eyaler”找到它）。

不幸的是，當我縮小一個大於初始SVG的圖形時，會得到如下信息：

拖放的結果

以下是相關代碼：

 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)); function redraw() { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } 

如何更改平移和縮放行為，以使其滾動並可以查看圖形的其余部分，而不是僅允許我移動最初可見的正方形？

Answer 1

好的，看起來我已經解決了...您需要在<g>而不是SVG本身上執行轉換。 所以：

 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)); var g = svg.append("g"); // add <g> function redraw() { g.attr("transform", // perform transform on g, not svg "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } 

只是把它放在這里，以防其他人犯同樣的錯誤！