使用d3.js

Question

我在Canvas上实现语义缩放时遇到了麻烦。我试图复制这个例子（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/