O caminho não mostrando em d3.js topoJson gráfico

StackOverflow https://stackoverflow.com//questions/25062902

Pergunta

Eu estou tentando desenhar um mapa usando topoJson então eu segui este exemplo

mas eu não estou recebendo nada desenhado.

aqui está o que eu escrevi

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
<style>

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path:hover {
  fill: red;
}

</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  d3.json("tunisia.json", function(error, topology) {

  console.log(topology);

  svg.selectAll("path")
      .data(topojson.feature(topology, topology.objects.governorates).features)
      .enter().append("path")
      .attr("d", path);
});

</script>

</body>
</html>

Depois de alguns depuração acontece que o caminho no meu caso é adicionado como segue: 

<svg width="960" height="500">
<path></path>
<path></path>
</svg>

considerando que, normalmente, deve ser como este: 

<svg width="960" height="500">
 <path d="M183.85631949544694,17.16574961388676L184.64695256075555,18.261986556132797L184.24437929962187,21.436416964644536L184.9109502450185,22.72190753660925L183.42733139583214,23.600229178621248L181.43637647772152,23.38526266060535L162.4858998398068,18.04698631290296L162.95134674943927,16.322885588815097L161.24381018256219,15.20848145955324L160.04585728433227,11.701769628478132L161.0879861841512,10.793553936506555L172.9773901748378,14.256236175137701Z"></path>
</svg>

aqui está os dados que eu estou usando:https://raw.githubusercontent.com/mtimet/tnacmaps/master/topojson/tunisia.json

você poderia por favor verificar o que eu estou fazendo de errado

Foi útil?

Solução

Não há nenhum problema com o arquivo json.

O problema que você está tendo é que você não está definindo uma projeção para o d3.geo.path() o que significa que ele cai de volta para o padrão.De acordo com a documentação do link acima:

#d3.geo.path()

Cria um novo geográfica caminho do gerador com as configurações padrão:o albersUsa projeção e um ponto de raio de 4,5 pixels.

O geo dados para um mapa da Tunísia, portanto, uma albersUsa projeção não contêm qualquer uma das coordenadas em seu conjunto de dados.É por isso que o caminho de dados é vazia na sua saída.

Para corrigir isso, você precisa definir uma projeção.Você pode fazer isso quando você carregar seus dados, e você pode usar d3.geo.bounds(), passando o seu featureCollection para encontrar os limites geográficos de seus dados.

var featureCollection = topojson.feature(topology, topology.objects.governorates);
var bounds = d3.geo.bounds(featureCollection);

Em seguida, a partir desses limites, pode-se calcular o centro de sua featureCollection:

var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
    centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

Em seguida, você pode usar isso para o centro de sua projeção.Por exemplo, se você estiver usando uma projeção de mercator, você poderia fazer o seguinte:

var projection = d3.geo.mercator()
  .scale(3000)
  .center([centerX, centerY]);

A escolha de uma escala de 3000 é arbitrário, ele só parecia funcionar bem, neste caso, ajustá-lo para o que funciona para você.

Finalmente, você precisa definir o .projection() do seu path para a projeção que você fez, antes de realmente criar o svg caminhos.

path.projection(projection);

svg.selectAll("path")
  .data(featureCollection.features)
  .enter().append("path")
  .attr("d", path);

AQUI é um exemplo de trabalho a utilização dos seus dados.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top