Semantisches Zoomen auf Canvas mit d3.js

Question

Ich habe Probleme beim Implementieren eines semantischen Zooms auf Canvas. Ich habe versucht, dieses Beispiel zu replizieren (https://bl.ocks.org/mbostock/3681006), aber einige der relevanten Funktionen wurden geändert, als d3 in v4 überging, und ich habe eine Ahnung, dass das Problem wahrscheinlich ist, wie ich skalieren.

jsFiddle hier: https://jsfiddle.net/kdqpxvff/

var canvas = d3.select("#mainCanvas"), 
mainContext = canvas.node().getContext("2d"), 
width = canvas.property("width"), 
height = canvas.property("height") 

var zoom = d3.zoom() 
.scaleExtent([1, 400]) 
.on("zoom", zoomed); 

var canvasScaleX = d3.scaleLinear() 
.domain([-100,500]) 
.range([0, 800]); 

var canvasScaleY= d3.scaleLinear() 
.domain([-150,200]) 
.range([0, 500]); 

var randomX = d3.randomUniform(-100,500), 
randomY = d3.randomUniform(-150,200); 

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

function zoomed() { 
    mainContext.clearRect(0, 0, width, height); 
    var transform = d3.zoomTransform(this); 
    canvasScaleX=transform.rescaleX(canvasScaleX); 
    canvasScaleY=transform.rescaleY(canvasScaleY); 
    draw(); 
} 

canvas.call(zoom); 

function draw(){ 
    data.forEach(function(each,something){ 
     mainContext.beginPath(); 
     mainContext.fillRect(canvasScaleX(each[0]), canvasScaleY(each[1]),3,3); 
     mainContext.fill(); 
    }); 
} 

draw(); 

Answer 1

konnte ich mein Problem beheben, scheint der Fehler durch meine linear skaliert nämlich induziert werden:

var canvasScaleX = d3.scaleLinear().domain([-100,500]).range([0, 800]); 

var canvasScaleY= d3.scaleLinear().domain([-150,200]).range([0, 500]); 

Ich bin immer noch nicht sicher, warum diese Ich habe meinen Code ausprobiert, aber ich werde weiter daran arbeiten und ein Update veröffentlichen, falls ich es herausfinden sollte. In der Zwischenzeit hier ist die Lösung, die ich fand - https://jsfiddle.net/4ay21wk1/