Первые сбои масштабирования после загрузки страницы с использованием D3 ⇐ CSS

[Anonymous]

Я использую D3 для увеличения изображения при нажатии и колесике мыши. Все работает нормально, но первое масштабирование сильно глючит.
Вот демо-версия приложения.
Вот как я приближаюсь к объекты:

Код: Выделить всё

const star = "https://gmg-world-media.github.io/skymap-v1dev/static/media/star.19b34dbf.svg";
const galaxy = "https://gmg-world-media.github.io/skymap-v1dev/static/media/galaxy.c5e7b011.svg";
const nebula = "https://gmg-world-media.github.io/skymap-v1dev/static/media/nebula.d65f45e5.svg";
const exotic = "https://gmg-world-media.github.io/skymap-v1dev/static/media/exotic.21ad5d39.svg";

const sWidth = window.innerWidth;
const sHeight = window.innerHeight;

const x = d3.scaleLinear().range([0, sWidth]).domain([-180, 180]);
const y = d3.scaleLinear().range([0, sHeight]).domain([-90, 90]);

const svg = d3.select("#render_map").append("svg").attr("width", sWidth).attr("height", sHeight);
const node = svg.append("g").attr('class', 'scale-holder');

const zoom = d3
.zoom()
.scaleExtent([1, 30])
.translateExtent([
[0, 0],
[sWidth, sHeight]
])

svg.call(zoom);

const imgG = node.append("g");
imgG
.insert("svg:image")
.attr("preserveAspectRatio", "none")
.attr("x", 0)
.attr("y", 0)
.attr("width", sWidth)
.attr("height", sHeight)
.attr("xlink:href", "https://gmg-world-media.github.io/skymap-v1dev/background_image_set/image-1.jpg");
imgG
.insert("svg:image")
.attr("preserveAspectRatio", "none")
.attr("x", 0)
.attr("y", 0)
.attr("width", sWidth)
.attr("height", sHeight)
.attr("xlink:href", "https://gmg-world-media.github.io/skymap-v1dev/background_image_set/image.jpg");

// Draw objects on map with icon size 8
drawObjects(8)

function drawObjects(size) {
const dataArray = [];
const to = -180;
const from = 180;
const fixed = 3;
const objectType = ["ST", "G", "N", "E"];

// Following loop is just for demo.
// Actual data comes from a JSON file.
for (let i = 0; i < 350; i++) {
const latitude = (Math.random() * (to - from) + from).toFixed(fixed) * 1;
const longitude = (Math.random() * (to - from) + from).toFixed(fixed) * 1;
const random = Math.floor(Math.random() * objectType.length);
dataArray.push({
"Longitude": longitude,
"Latitude": latitude,
"Category": objectType[random]
})
}

for (let index = 0; index < dataArray.length;  index++) {
// Loop over the data
const item = dataArray[index]
const mY = y(Number(item.Latitude))
const mX = x(Number(item.Longitude))

if (node.select(".coords[index='" + index + "']").size() === 0) {
let shape = star;

// Plot various icons based on Category
switch (item.Category) {
case "ST":
shape = star;
break;
case "G":
shape = galaxy;
break;
case "N":
shape = nebula;
break;
case "E":
shape = exotic;
break;
}

const rect = node
.insert("svg:image")
.attr("class", "coords")
.attr("preserveAspectRatio", "none")
.attr("x", mX)
.attr("y", mY)
.attr("width", size)
.attr("height", size)
.attr("cursor", "pointer")
.attr("index", index)
.attr("xlink:href", shape)
.attr("opacity", "0")
.on("click", function() {
handleObjectClick(index, mX, mY)
})

// Add the objects on the map
rect.transition().duration(Math.random() * (2000 - 500) + 500).attr("opacity", "1")
}

}

}

function boxZoom(x, y) {
// Zoom towards the selected object
// This is the part responsible for zooming
svg
.transition()
.duration(1000)
.call(
zoom.transform,
d3.zoomIdentity
.translate(sWidth / 2, sHeight / 2)
.scale(6)
.translate(-x, -y)
);

}

function handleObjectClick(currentSelect, x, y) {

// Appending some thumbnails to the clicked object here...
//Call the zoom function
boxZoom(x, y)

}

Код: Выделить всё

#render_map {
width: 100vw;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}

Код: Выделить всё

Похоже, этот масштаб здесь не работает. Но в приложении это определенно работает. Я не модифицировал фрагмент кода, отвечающий за масштабирование. (Вместо этого посмотрите эту демонстрацию.)
Проблема в том, что масштабирование подскакивает, когда вы делаете это в первый раз после загрузки страницы, а затем исправляется само собой.
Я не знаю. Я не понимаю, что я здесь делаю не так. Любые намеки были бы прекрасны.

ТИА!

Подробнее здесь: https://stackoverflow.com/questions/642 ... d-using-d3