TransWikia.com

poner un borde a todos las regiones de un mapa d3.js

Stack Overflow en español Asked by user5115790 on January 27, 2021

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í

One Answer

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).

Answered by Alvaro Montoro on January 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP