javascript - 如何在 Canvas 上使用 d3 放大 map ？

Question

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

问题: 我让 map 本身在 Canvas 上工作，但我一直在尝试添加缩放功能，但没有成功。任何帮助解决这个问题的帮助将不胜感激。

带有 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() {
          ...
        }

Answer 1

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

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

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