d3.js使用zoomable / pan强制图表

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

你要做的就是删除第一个追加＆＃34; g＆＃34 ;;

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/