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/