вызывая 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 и т. Д. Я просто пытаюсь минимизировать код для этого примера.)

Ответы на вопрос(1)

Решение Вопроса

ование и перевод вашего вектора с помощью d3 geoProjection, поскольку при масштабировании вы применяете translate и scale к самому пути, а не к проекции:

  vector.selectAll("path")
    .attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
    .style("stroke-width", 1 / change.k);

Поскольку вы не устанавливаете масштаб и перевод, при загрузке ваших векторов они просто отображаются неправильно. Они нарисованы очень маленькими - так как ваш масштаб проекции1/tauс переводом[0,0], Проверка svg при загрузке страницы показывает, что они есть, и они крошечные.

Решение состоит в том, чтобы нарисовать ваши векторы доmap.call("zoom") - таким образом, вы можете применить базовое преобразование (центр, преобразование и масштаб) к траектории перед ручным масштабированием:

// read in the topojson
d3.json("ausElectorates.json", function(error, mapData) {
if (error) throw error;

var electorates = topojson.feature(mapData, mapData.objects.tracts);

// draw the electorate vectors
vector.selectAll("path")
  .data(electorates.features)
  .enter().append("path")
    .attr("class", "electorate")
    .attr("d", path);

// 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]));
   });
 Markus11 дек. 2017 г., 06:55
Спасибо, Андрей; ты довольно блестящий. После публикации вопроса я понял, что вы сказали: векторымы нарисовано но не в нужном месте. Однако в обоих растровых и векторных примерах Бостока, которые я изучал, он всегда «рисовал» вектор - .attr («d», путь) -после вызывая zoom.transform. Теперь я вижу проблему: вектор Бостока - это единственный путь (одна базовая линия), и он добавляет этот путь перед функцией d3.json (). У меня много путей (электоратов), которые я не мог добавить, пока данные не были загружены. Спасибо, что разобрались со мной снова!

Ваш ответ на вопрос