d3.js - 缩放画布点以在缩放期间覆盖在svg地图上

Question

我正在使用d3.geo.tile渲染栅格地图，就像在此示例here中一样（栅格图像不适用于该页面，因此我将其克隆到here上） 。与此示例不同，我有数千个要显示的点，所以我使用HTML5 Canvas而不是SVG渲染它们。我将画布直接放在地图上。

点正确渲染，我可以平移地图。但是，如果我放大点没有转换为正确的坐标。

以下是绘制这些要点的函数：

function set_scales() {

    var translate = zoom.sub_regions.translate(), 
        scale = zoom.sub_regions.scale(),
        width = sub_region.get('width'), 
        height = sub_region.get('height');

    var x1 =  -translate[0]+width/2;
    var y1 =  -translate[1]+height/2;
    var x2 =  width + x1;
    var y2 =  height + y1;

    var x = d3.scale.linear().domain([x1, x2]).range([0, width]);
    var y = d3.scale.linear().domain([y1, y2]).range([0, height ]);

    draw_canvas();
    function draw_canvas() {
        sub_region.var.context.clearRect(0, 0, width, height);
        var data = sub_region.get('points');
        if (!data) {
            return;
        }
        var i = -1, n = data.length, d, cx, cy;
        var canvas = sub_region.get('context');
        canvas.fillStyle = '#0A00FF';
        canvas.beginPath();
        while (++i < n) {
            d = data[i];
            cx = x(d[0]);
            cy = y(d[1]);
            canvas.moveTo(cx, cy);
            canvas.arc(cx, cy, 1, 0, 2 * Math.PI);
        }
        canvas.fill()

    }

}

我知道我应该以某种方式使用scale变量，但我无法弄清楚如何。正确定位点的比例是4096.我尝试创建一个名为zoom_factor的变量，将其设置为4096/scale，然后乘以x1，x2，{{1 }}和y1由它坐标，但那不起作用。也许我没有做好。

我拍了一些截图：

这是在缩放之前（点正确渲染）：

这是在缩放之后（点转换为不正确的坐标）：

如果你想看到它的所有破碎的荣耀，请转到here并点击美国，然后选择＆＃34;电台。＆＃34;

我真的可以在这个上使用一些帮助;已经圈了几天了！