Как увеличить карту, используя d3 на холсте?

1

Некоторые предпосылки: я построил карту и около 35 тыс. Кругов на ней с масштабированием и всплывающими подсказками, отлично работающими на 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() {
          ...
        }
Теги:
d3.js
canvas

1 ответ

1

При использовании прогнозов секрет, чтобы заставить работать масштабирование, - это преобразование самой проекции. Для вашего примера вы можете просто настроить свою проекцию до перерисовки с помощью чего-то вроде:

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

Другой вариант - масштабировать сам холст, как в этом примере, я сделал

Ещё вопросы

Сообщество Overcoder
Наверх
Меню