如何在画布上使用 d3 放大地图？答案

【问题标题】：How to zoom on a map using d3 on canvas?如何在画布上使用 d3 放大地图？
【发布时间】：2017-10-28 15:37:56
【问题描述】：

一些背景：我已经绘制了一张地图和大约 35k 个圆圈，缩放和工具提示在 SVG 上运行良好。但是，由于需要绘制的圆圈数量（并且可能不是最好的编写代码；我是初学者），我在运行页面时看到了性能问题。因此，我想在画布上尝试相同的页面以提高性能。

问题：我让地图本身在画布上工作，但我一直在尝试添加缩放功能但徒劳无功。任何帮助解决此问题将不胜感激。

带有 SVG 的示例 - https://bl.ocks.org/sharad-vm/af74ae5932de1bcf5a39b0f3f849d847

我的 Canvas 代码如下：

        //Width and height
        var w = 700;
        var h = 600;

          //Create Canvas element
        var canvas = d3.select('#map')
                      .append('canvas')
                      .attr('width', w)
                      .attr('height', h);

        var context = canvas.node().getContext('2d');

        //Define map projection
        var projection = d3.geo.mercator()
                               .translate([w/2, h/1.72])
                               .scale([100]);


        //Define path generator
        var path = d3.geo.path()
                         .projection(projection)
                         .context(context);

        var init = 0;

        canvas.call(zoom);

        var zoom = d3.behavior.zoom()
                    .translate([0, 0])
                    .scale(1)
                    .scaleExtent([1, 30])
                    .on("zoom", zoomed);

        //function to zoom
        function zoomed() {
         context.save();
         context.clearRect(0, 0, w, h);
         context.translate(d3.event.transform.x, d3.event.transform.y);
         context.scale(d3.event.transform.k, d3.event.transform.k);
         draw();
         context.restore();
         };

        draw();  

        //Load in GeoJSON data
        function draw() {
          ...
        }

【问题讨论】：

标签： javascript d3.js canvas

【解决方案1】：

使用投影时，使缩放起作用的秘诀是变换投影本身。对于您的示例，您可以在重绘之前调整投影，例如：

projection.translate([w/2 + d3.event.transform.x, h/1.72 + d3.event.transform.y]) .scale([100*d3.event.transform.k]);

另一种选择是缩放画布本身，like in this example I made

【讨论】：