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 还要添加一个 g：

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')即可（我已经相应修改了你的fiddle）

另一个建议：缩放和平移在没有 .transition()

的情况下效果最好

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

D3.js zoom functionality in node-map

javascript

d3.js