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

我正在使用渲染光栅地图，如本例中所示（光栅图像在该页面上不起作用，因此我将其克隆了过来）。与此示例不同，我要显示数千个点，因此我使用HTML5画布而不是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()

    }

}

函数集_scales（）{
var translate=zoom.sub_regions.translate（），
缩放=缩放.sub_区域.scale（），
宽度=子区域。获取（'width'），
高度=子_区域。获取（'height'）；
var x1=-平移[0]+宽度/2；
变量y1=-平移[1]+高度/2；
var x2=宽度+x1；
变量y2=高度+y1；
var x=d3.scale.linear（）.域（[x1，x2]）.范围（[0，宽度]）；
变量y=d3.scale.linear（）.domain（[y1，y2]）.range（[0，height]）；
绘制画布（）；
函数draw_canvas（）{
sub_region.var.context.clearRect（0，0，宽度，高度）；
var数据=sub_region.get（'points'）；
如果（！数据）{
返回；
}
变量i=-1，n=data.length，d，cx，cy；
var canvas=sub_region.get（'context'）；
canvas.fillStyle='#0A00FF'；
canvas.beginPath（）；
而（++i

我知道我应该以某种方式使用

scale

变量，但我不知道如何使用。正确定位点的比例为4096。我试着制作一个名为

zoom\u factor

的变量，将其设置为

4096/比例

，并将

x1

、

x2

、

y1

、和

y2

坐标乘以它，但这不起作用。也许我做得不对

我拍了一些截图：

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

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

如果你想看到它的所有破碎的荣耀去点击美国，然后选择“电台”

---

在这件事上我真的需要一些帮助；几天来一直在兜圈子

我对canvas也有一个类似的点缩放问题：你解决过你的问题吗？@zach我确实解决了，但问题不在我展示的代码片段中。这个问题是数学问题；我没有正确计算需要转换的对象的边界框。看起来你的问题有点不同。它只是在垂直方向上被扭曲，平移而不是缩放。@MikeFurlender:你能分享你的答案吗？如果你解决了问题，你应该回答你自己的问题并接受它作为答案。这将帮助所有来这里检查的人。。。