D3 Холст земной шар с анимированным текстом
Я использую d3 V4 с geoOrthographic, чтобы вращать трехмерный глобус на холсте.
Я последовал и сшил несколько примеров с bl.ocks.org, чтобы добиться этого. Я новичок в d3.
Пока что у меня есть вращающийся глобус и точки в каком-то месте города, которые появляются и исчезают соответственно с вращением глобуса.
Я также добавил название города к соответствующим точкам, но мне не удалось синхронизировать их с точками. Таким образом, название моего города не появляется и не исчезает одновременно с точками.
вот код моего Глобуса. Codepen Canvas Globe Я сделал глобус, который работает так, как я хочу, но в SVG Codepen SVG Globe однако SVG для меня невозможен, потому что он слишком сильно замедляет приложение после добавления к нему. Так что я вынужден использовать холст для выступления.
Я устал от нескольких решений / идей из другой публикации в Stackoverflow, но не могу заставить их работать.
Спасибо за помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я немного реорганизовал ваш код из вашего второго примера в ваш первый, и он работает:
outerArray.forEach(function(d) {
const coordinate = [d[0], d[1]];
const center = [width / 2, height / 2];
gdistance =d3.geoDistance(coordinate,projection.invert(center));
if (gdistance < 1.57079632679490) {
context.fillText(
d[2],
projection(d)[0],
projection(d)[1]
);
}
});
Обновлен кодовый ключ.
Потрясающе, большое спасибо за этот @Mark, он работает так, как ожидалось.