Ruta de acceso no se muestra en d3.js topoJson gráfico

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

Pregunta

Estoy tratando de dibujar un mapa con topoJson así que he seguido este ejemplo

pero no estoy recibiendo nada dibujado.

aquí está lo que escribí

<!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>

Después de la depuración resulta que la ruta en mi caso se agrega la siguiente manera: 

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

mientras que lo que normalmente debería 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>

estos son los datos que estoy utilizando:https://raw.githubusercontent.com/mtimet/tnacmaps/master/topojson/tunisia.json

podría usted por favor, comprobar lo que estoy haciendo mal

¿Fue útil?

Solución

No hay ningún problema con el archivo json.

El problema que tiene es que no son la definición de una proyección para su d3.geo.path() lo que significa que se vuelve a la configuración predeterminada.De acuerdo a la documentación vinculada arriba:

#d3.geo.path()

Crea una nueva ruta geográfica del generador con la configuración predeterminada:el albersUsa proyección y un punto radio de 4.5 píxeles.

Sus datos de geo es para un mapa de Túnez, por lo que un albersUsa proyección no contendrá ninguna de las coordenadas en el conjunto de datos.Es por eso que la ruta de datos está vacío en su salida.

Para solucionar este problema, es necesario definir una proyección.Usted puede hacer esto cuando se cargan los datos, y se puede utilizar d3.geo.bounds(), pasando en su featureCollection para encontrar los límites geográficos de sus datos.

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

Luego de estos límites, se puede calcular el centro de su featureCollection:

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

A continuación, puede utilizar esta opción para centro de su proyección.Por ejemplo, si usted está utilizando una proyección de mercator, se podría hacer lo siguiente:

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

La elección de una escala de 3000 es arbitraria, parecía funcionar bien en este caso, ajustar a lo que funcione para usted.

Finalmente, es necesario establecer la .projection() de su path para la proyección se hizo, antes de que en realidad la creación de las rutas svg.

path.projection(projection);

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

AQUÍ es un ejemplo de trabajo que se utilicen sus datos.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top