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'

在.append('g')之后添加.on("zoom", zoom))（我已相应修改了您的fiddle）

另一个建议：缩放＆amp;没有.transition()

，平移工作效果最佳

D3.js节点映射中的缩放功能

2 个答案: