d3.js可縮放/平移的力量圖表

Question

我正在創建具有可展開/可摺疊部分的力量圖表。我正在嘗試將縮放/平移功能集成到圖表中，但它僅在實際節點上進行交互（平移/鼠標滾輪）時才起作用 - 而不是圖表本身。

http://jsfiddle.net/NYEaX/837/

var svg = d3.select("#chartHolder") 
.append("svg") 
.attr("width", width) 
.attr("height", height) 
.attr("pointer-events", "all") 
.append('svg:g') 
.call(d3.behavior.zoom().on("zoom", redraw)) 
.append('svg:g'); 

http://jsfiddle.net/nrabinowitz/QMKm3/ ^這個例子是什麼，我試圖模仿 - 和它的作品因此與圖表中的空的空間互動。

Answer 1

你所要做的就是刪除第一個附加「g」;

var svg = d3.select("#chartHolder") 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("pointer-events", "all") 
    .call(d3.behavior.zoom().on("zoom", redraw)) 
    .append('svg:g'); 

http://jsfiddle.net/frankcastro/qv42nt7o/1/