D3.JS 'Zoom' undefined

Ich versuche einfach Zoom/Pan-Lösung zu machen, mit diesem CodeD3.JS 'Zoom' undefined

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');

Aber this Moment gibt es:

Uncaught TypeError: Cannot read property 'zoom' of undefined

In html Ich habe nur dies:

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

PS Inspiriert von this

Quelle

2016-08-08 David Arutiunian

ich mit d3 heute begonnen, so dass ich gewonnen‘ Lass noch keine echte Antwort. Sie verwenden Version 4 der API? Sieht so aus, als wäre "d3.behavior.zoom" nach "d3.zoom" verschoben worden. – Quotidian

d3 v4 hat kein d3.behavior, Zoom. Es ist einfach d3.zoom –

Auch mit der v4 können Sie direkt 'svg.attr (" transform ", d3.event.transform)' als das Ereignis beim Zoomen ausgelöst hat jetzt ein * transform * -Objekt mit einer 'toString'-Methode ([Dok.] (Https://github.com/d3/d3-zoom#zoom-transforms)) – mgc

Versuchen Below Code: in v4 von d3.js, d3.behavior.zoom zu d3.zoom geändert

var svg; 

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

Quelle

2017-10-26 11:50:00

Antwort

Verwandte Themen