D3.JS「變焦」未定義

我試圖讓簡單的縮放/平移的解決方案，使用此代碼D3.JS「變焦」未定義

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>

PS通過this

來源

2016-08-08 David Arutiunian

我與D3今天開始，所以我贏了」還沒有給出真正的答案。你使用api的第4版？看起來像'd3.behavior.zoom'移到'd3.zoom'。 – Quotidian

d3 v4沒有d3.behavior，縮放。它只是d3.zoom –

同樣在v4中，您可以直接使用'svg.attr（「transform」，d3.event.transform）'，因爲在縮放時觸發的事件現在具有帶'toString'方法的* transform *對象[文檔]（https://github.com/d3/d3-zoom#zoom-transforms）） – mgc

啓發試試下面的代碼：在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");

來源

2017-10-26 11:50:00

D3.JS「變焦」未定義

回答

相關問題