Семантическое масштабирование на холсте с использованием 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/