D3.JS“缩放”未定义

Posted 2023-02-22

【中文标题】D3.JS“缩放”未定义

【英文标题】：D3.JS 'zoom' undefined

【发布时间】：2016-12-14 16:59:46

【问题描述】：

我正在尝试使用此代码制作简单的缩放/平移解决方案

  var map = document.getElementById('map'),
      svg = d3.select('#map')
            .call(d3.behavior.zoom().on("zoom", function () 
                svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
            ))
            .append('g');

但在this 时刻，它给出了：

Uncaught TypeError: Cannot read property 'zoom' of undefined

在 html 中我只有这个：

<svg id="map" class="map" viewBox="0 0 8000 2000"></svg>

附：灵感来自this

【问题讨论】：

我今天从 d3 开始，所以我不会留下真正的答案。您使用第 4 版的 api？看起来 d3.behavior.zoom 已移至 d3.zoom。

d3 v4 没有 d3.behavior,zoom。它只是 d3.zoom

同样在 v4 中，您可以直接使用 svg.attr("transform", d3.event.transform)，因为在缩放时触发的事件现在有一个带有 toString 方法的 transform 对象 (Doc.)跨度>

我遇到了完全相同的问题。你有没有得到解决方案？

@PaulFitzgerald 如上所述，解决方案是改用d3.zoom。这适用于 v4。

【参考方案1】：

试试下面的代码： 在 d3.js 的 v4 中， d3.behavior.zoom 改为 d3.zoom

var svg;

svg= d3.select("svg")
        .call(d3.zoom().on("zoom", function () 
              svg.attr("transform", d3.event.transform)
         ))
        .append("g");