javascript - 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/