Question

一些背景：我已经绘制了一张地图和大约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() {
          ...
        }

Answer 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

如何在画布上使用d3缩放地图？

1 个答案: