1

Soy nuevo en esta comunidad. Tengo un mapa en el que dibujo varias regiones, departamentos y municipios. un departamento tiene municipios. quiero asignarle un color a los bordes de todos los municipios y un color. y otro color a los bordes de todos los departamentos, así mismo como un color para pintarlos, pero no sé como hacer para que los departamentos le pueda poner color a todos los bordes. los bordes de por fuera no son pintados.

este es mi código:

http://jsfiddle.net/myoehkx2/

Esta es la estructura del json que pinta el mapa, "depts" son los departamentos y "mpios" son los municipios.

introducir la descripción de la imagen aquí

4
  • Este es más interesante que el otro. ¿Sólo tienes los municipios y departamentos?
    – Alvaro Montoro
    el 31 jul. 2016 a las 22:52
  • @AlvaroMontoro si, solo eso, soy nuevo en este tema de d3.js en la pregunta pasada, creí que con ese mapa podia guiarme pero aun sin resultado. te diré cual es el reto que luego haré. filtrar por municipios o departamentos. que si elijo departamentos, solo me muestre los departamentos y lo mismo con municipios. es por eso que por ahora necesito aprender como poner bordes y colores de relleno a cada uno. no he podido conseguir esto aun. el 31 jul. 2016 a las 22:55
  • Es que pasa lo mismo que en el otro: la parte negra son los municipios que se pintan sin borde, y la parte roja es sólo la separación entre departamentos. Entonces podrías solucionarlo igual que la otra pregunta, el problema es que el borde "general" será del mismo color que el de los municipios
    – Alvaro Montoro
    el 31 jul. 2016 a las 23:00
  • o no sé si solucione el problema solo pintando los departamentos, pero no sé como solucionarlo, los departamentos no todos tienen borde rojo el 31 jul. 2016 a las 23:11

1 respuesta 1

0

Esta respuesta te ofrece dos alternativas (aunque lejos de ser ideales). Espero que te sirva mientras encuentras algún método mejor.

El problema que te encuentras ahora es parecido al de la pregunta anterior, pero lo suficiente diferente para que no se pueda resolver de la misma manera. En aquella pregunta sólo dibujabas un elemento de un sólo color, pero ahora tienes dos elementos (municipios y departamentos) y cada uno tiene un color diferente. La parte negra son los municipios que se pintan sin borde, y la parte roja es sólo la separación entre departamentos.

Alternativa 1:

Podrías intentar solucionarlo igual que la otra pregunta, el problema es que el borde "general" será del mismo color que que le asignes a los municipios en lugar de a los departamentos, lo que puede quedar un poco raro. Puedes ver esta solución en este JSFiddle.

La idea es simplemente agregarle un borde a los municipios cuando se crean:

.style("stroke", "green")
.style("stroke-width", "1px")

Alternativamente, podrías ahorrarte mucho código innecesario poniéndolo en CSS de esta manera (puedes verlo funcionando en este JSFiddle):

.mpio {
  stroke:green;
  stroke-width:1px;
}

Alternativa 2:

Esta alternativa implica duplicar todo el código que pinta los municipios, y añadirle un borde más grueso que el que le pongas después a los municipios, pero del mismo color que los departamentos. De este modo, el borde exterior se verá.

Lo malo de esta alternativa es que se duplica mucho código y dista mucho de ser ideal por ello. Puedes verla funcionar en este JSFiddle. La idea sería añadir este código antes de los departamentos:

 var dept2 = g.selectAll(".mpio")
    .data(topojson.feature(co, co.objects.mpios).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width","2px");

Otra cosa mala: ahora la separación entre municipios se ve de un color rojo un poco más oscuro que el de los departamentos y puede no gustarte. Podrías solucionarlo añadiéndoles un borde a los municipios (como puedes ver en este JSFiddle).

3
  • le agradezco mucho. He visto su codigo y como le dije, lo que pretendo básicamente es mostrar municipios, o mostrar departamentos. su codigo me puede servir, pero lo que necesito es tambien pintar los departamentos de un color y los municipios de otro, por ahora me es imposible hacerlo, se ve distorsionado el mapa al poner .style('fill', "blue") a los departamentos por ejemplo el 1 ago. 2016 a las 14:20
  • i.imgur.com/lJSZfQK.jpg el 1 ago. 2016 a las 14:22
  • @user5115790 si no me equivoco, eso ocurre porque estás intentando hacer un fill de un path que no son las regiones en sí, sino sólo las líneas de separación entre las regiones. Entonces lo que se colorea no es lo que esperas que se coloree. Si pudieras obtener un json diferente que tenga los paths de los municipios (ya lo tienes) y de las regiones (y no sólo las líneas de separación) sería sencillo
    – Alvaro Montoro
    el 1 ago. 2016 a las 14:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.