节点图中的D3.js缩放功能

Question

目前，我正在基于此D3.js示例http://bl.ocks.org/mbostock/2706022处理地图上的节点。

现在，我想使用缩放功能，但是当我按照以下代码添加此功能时，它将仅在Firefox中起作用。 在所有其他浏览器中，它不起作用。 我还删除了拖动方法。

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([1, 8])
    .on("zoom", zoom));

(...)

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

因此，问题在于是否可以同时使用tick和zoom功能。 这样我就可以浏览节点。

Answer 1

我根据此更改缩放功能： http : //bl.ocks.org/mbostock/3680999还要添加ag：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([1, 8])
    .on("zoom", zoom))
  .append('g') # Append g;

http://jsfiddle.net/gvatrgw0/3/

Answer 2

您需要添加一个'g'来应用平移和缩放转换

只需在.on("zoom", zoom))之后添加.append('g') .on("zoom", zoom)) （我已经相应地修改了您的小提琴 ）

另一个建议：没有.transition()缩放和平移效果最佳