Criei mapas D3 eficazes usando rasters (d3.tile e bibliotecas de mapas) e vetores (TopoJSON em formas SVG). Mas acertei um bug quando os combinei.

Eu segui os exemplos de vetor e varredura de Mike Bostock, especialmente seus"Varredura e vetor III", que altera a largura da transformação e do traçado para atualizar como os vetores são exibidos.

Meu mapaquase funciona perfeitamente. No entanto, durante o carregamento, apenas os blocos de varredura são exibidos; os vetores são invisíveis:

Mas assim que eu acionar od3.zoom evento (por movimento panorâmico ou zoom), os vetores são exibidos:

Não entendo isso, porque digo explicitamente ao navegador, independentemente do evento de zoom, para desenhar os vetores. Este é o trecho relevante:

  // 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);
  });

Por alguma razão, essa última linha dod3.json() função -.attr("d", path") - não está visualizando os vetores.

Clique aqui para ver o mapa.Clique aqui para acessar o código completo e o TopoJSON que ele usa.

Eu adoraria conselhos sobre este, o que está me deixando desconcertado!

(Desculpas do PS por omitir atribuições de direitos autorais para os blocos de mapa, a biblioteca D3.js., etc. - estou apenas tentando minimizar o código deste exemplo.)