Увеличить изображение с изображениями d3.js

Question

Привет Я пытаюсь сделать масштабирование и панорамирование на некоторых изображениях. У меня есть пример по этой ссылке: http://bl.ocks.org/mbostock/3681006 Главное отличие в том, что они рисуют фигуры не изображениями. Вот сценарий, что я сделал

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"; 

если кто-то может помочь было бы здорово. Заранее спасибо.

Answer 1

Сделайте функцию рисования глобальной, чтобы ее можно было вызвать из функции масштабирования, а также из функции загрузки изображения.

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

Следующая вместо:

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

это должно было быть:

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

так, что увеличение/сковорода вычисляет новое положение правильно.

Рабочий код here