Zoom Pan Bilder mit d3.js

Question

Hallo ich versuche zu Zoomen und Schwenken auf einige Bilder. Ich habe das Beispiel von diesem Link: http://bl.ocks.org/mbostock/3681006 der Hauptunterschied besteht darin, dass sie Formen nicht Bilder zeichnen. Hier ist ein das Skript, was ich getan

https://jsfiddle.net/t1gqg1m6/1/

var width = 960, 
    height = 500; 

var randomX = d3.random.normal(width/2, 80), 
    randomY = d3.random.normal(height/2, 80); 

var data = d3.range(2000).map(function() { 
    return [ 
    randomX(), 
    randomY() 
    ]; 
}); 

var x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, height]) 
    .range([height, 0]); 

var canvas = d3.select("canvas") 
    .attr("width", width) 
    .attr("height", height) 
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)) 
    .node().getContext("2d"); 

function zoom() { 
    canvas.clearRect(0, 0, width, height); 
    draw(); 
} 

var img = new Image(); 
img.onload = function() { 
    function draw(){ 
    for(var i=0;i<=500;i+=50){ 
     canvas.drawImage(img, i, 10, 50, 40); 
    } 
    } 
    draw(); 
} 

img.src = "http://static.dnaindia.com/sites/default/files/styles/half/public/2016/04/02/444652-google-photos-emoji-google-image-search-using-emoji-coolkengzz-shutterstock.jpg?itok=b1lBccFF"; 

wenn jemand wäre toll, helfen kann. Vielen Dank im Voraus.

Answer 1

Machen Sie Ihre Zeichenfunktion global, so dass sie von der Zoom-Funktion und auch von der Bild-Onload-Funktion aufgerufen werden kann.

function draw() { 
    for (var i = 0; i <= 500; i += 50) { 
    canvas.drawImage(img, x(i), 10, 50, 40); 
    } 
} 

Nächste statt:

canvas.drawImage(img, i, 10, 50, 40); 

sollte es gewesen sein:

canvas.drawImage(img, x(i), 10, 50, 40); 

, so dass der Zoom/Pan berechnet die neue Position richtig.

funktionscode here