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

D3.js zoom functionality in node-map

本文关键字：缩放 功能 映射 js 节点 D3      更新时间：2023-09-26

目前，我正在根据这个 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函数。所以我可以在节点中导航。

您需要

添加一个"g"，用于应用转换和缩放转换

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

另一个建议：缩放和平移在没有.transition()的情况下效果最好

我根据以下内容更改了您的缩放功能： 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/

相关文章：