d3.jsを使用したキャンバス上での意味的なズーム

Question

キャンバスでセマンティックズームを実装する際に問題があります。私はこの例（https://bl.ocks.org/mbostock/3681006）を複製しようとしましたが、d3がv4に移行したときに関連する関数の一部が変更されました。問題がおそらく再スケーリングしているような気がします。ここ

jsFiddle：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

私は私の問題を解決することができました、エラーが私の線形によって誘発されているように見える、すなわちスケール：

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

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

私はまだ、なぜこれらのわかりません私のコードを上回っていましたが、私が見つけた場合には、私はそれに取り組み、アップデートを投稿します。一方、私が見つけた解決策はここにあります - https://jsfiddle.net/4ay21wk1/