вызывая zoom.transform. Теперь я вижу проблему: вектор Бостока - это единственный путь (одна базовая линия), и он добавляет этот путь перед функцией d3.json (). У меня много путей (электоратов), которые я не мог добавить, пока данные не были загружены. Спасибо, что разобрались со мной снова!
лал эффективные карты D3, используя растры (d3.tile
и библиотеки карт) и векторы (TopoJSON в формах SVG). Но я сталкиваюсь с ошибкой, когда объединяю их.
Я следовал растровым и векторным примерам Майка Бостока, особенно его"Растр и Вектор III", который изменяет трансформацию и ширину обводки, чтобы обновить способ отображения векторов.
Моя картапочти работает отлично. Однако при загрузке отображаются только растровые плитки; векторы невидимы:
Но как только я активируюd3.zoom
события (путем панорамирования или масштабирования), векторы отображаются:
Я не понимаю этого, потому что я явно говорю браузеру, независимо от события увеличения, рисовать векторы. Это соответствующий фрагмент:
// read in the topojson
d3.json("ausElectorates.json", function(error, mapData) {
if (error) throw error;
var electorates = topojson.feature(mapData, mapData.objects.tracts);
// apply a zoom transform equivalent to projection{scale,translate,center}
map.call(zoom)
.call(zoom.transform, d3.zoomIdentity
.translate(mapWidth / 2, mapHeight / 2)
.scale(1 << 12)
.translate(-centre[0], -centre[1]));
// draw the electorate vectors
vector.selectAll("path")
.data(electorates.features)
.enter().append("path")
.attr("class", "electorate")
.attr("d", path);
});
По какой-то причине эта последняя строкаd3.json()
функция -.attr("d", path")
- не визуализирует векторы.
кликните сюда чтобы увидеть карту.кликните сюда чтобы получить доступ к полному коду и к TopoJSON, который он использует.
Я хотел бы совет на этот, который сбивает меня с толку!
(PS Прошу прощения за то, что пропустил авторские права на тайлы карты, библиотеку D3.js и т. Д. Я просто пытаюсь минимизировать код для этого примера.)