Некоторые предпосылки: я построил карту и около 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() {
...
}
При использовании прогнозов секрет, чтобы заставить работать масштабирование, - это преобразование самой проекции. Для вашего примера вы можете просто настроить свою проекцию до перерисовки с помощью чего-то вроде:
projection.translate([w/2 + d3.event.transform.x, h/1.72 + d3.event.transform.y]).scale([100*d3.event.transform.k]);
Другой вариант - масштабировать сам холст, как в этом примере, я сделал