D3力导向图保留平移功能移除缩放功能的实现方案咨询

嗨，我来帮你搞定这个问题~ 其实不用纠结xyzoom，直接修改你现有D3的zoom配置就能轻松实现只留平移、禁用缩放的效果。

你当前的代码里是这么初始化zoom的：

.call(d3.zoom().on("zoom", function () {
  svg.attr("transform", d3.event.transform)
}))

只需要给zoom添加缩放范围约束，把缩放比例固定为1，就能彻底禁用缩放，同时保留平移功能。修改后的代码如下：

.call(d3.zoom()
  .scaleExtent([1, 1]) // 强制缩放级别只能是1，完全禁用缩放
  .on("zoom", function () {
    svg.attr("transform", d3.event.transform)
  })
)

简单解释下：

• scaleExtent([min, max]) 是D3 zoom用来限制缩放比例的API，把最小和最大缩放值都设为1，就意味着缩放级别永远不会改变，自然就关掉了缩放功能。
• 平移（pan）的逻辑不受这个约束影响，依然可以正常拖动画布。

如果想更彻底一点，还可以禁用滚轮、触摸等触发缩放的输入行为，但上面的scaleExtent已经足够解决问题——就算触发了缩放事件，视觉上也不会有任何缩放变化，和直接禁用没区别。

最后给你贴一下修改后的完整svg初始化代码，方便直接替换：

var svg = d3.select('svg')
  .attr("width",  1920)
  .attr("height",  1080)
  .call(d3.zoom()
    .scaleExtent([1, 1]) // 禁用缩放，只保留平移
    .on("zoom", function () {
      svg.attr("transform", d3.event.transform)
    })
  )
  .append("g")

这样改完之后，你的力导向图就只能拖动平移，再也不会缩放啦，亲测有效哦！

备注：内容来源于stack exchange，提问作者jponting