1

Tengo un mapa, que pueden encontrar en el siguiente link:

http://jsfiddle.net/yj08Lwwv/

Quiero pintar todos los bordes de los estados en color rojo, pero los bordes externos no quedan pintados del color rojo. Qué puedo hacer?

introducir la descripción de la imagen aquí

1 respuesta 1

1

El código actual lo que hace es que pinta los estados actuales uno a uno sin especificar un fill (por eso se ven negros), excepto el que tiene el id 17 que se pone en rojo. Y después de eso se añade las líneas de separación de estado a estado en rojo.

Si lo que quieres es que el el país tenga los bordes en rojo también, una solución sería hacer que cuando se pinten los estados, se les añada un borde (usando stroke y stroke-width) y entonces ya no necesitarás dibujar la separación entre estados (porque ya se habrá dibujado con cada estado):

 svg.selectAll(".state")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
    .style('stroke', "red")
    .style('stroke-width','1px')
    .style('fill', function(d){

        if(d.id == 17){
            return 'red';
        }
    })        
    .attr('class', 'state')
    .on('click', function(d){
        //your code here 
    })
    .on('mouseover', function(d){
        //your code here
    });

Lo puedes ver funcionando aquí (o en esta actualización de tu JSFiddle):

var width = 720,
    height = 375;

var projection = d3.geo.albersUsa()
    .scale(800)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

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


d3.json("https://dl.dropboxusercontent.com/u/232969/cnn/us.json", function(error, us) {
      
    
    svg.selectAll(".state")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("path")
        .attr("d", path)
        .style('stroke', "red")
        .style('stroke-width','1px')
        .style('fill', function(d){
          
            if(d.id == 17){
                return 'red';
            }
        })        
        .attr('class', 'state')
        .on('click', function(d){
            //your code here 
        })
        .on('mouseover', function(d){
            //your code here
        });
    
    

    /*svg.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) {
            return a !== b;
        }))
        .attr("d", path)
        .attr("class", "state-boundary");
    /*
    svg.append("path")
        .datum(topojson.mesh(us, us.objects.counties, function(a, b) {
            return a !== b;
        }))
        .attr("d", path)
        .attr("class", "county-boundary");
      */
 
});


d3.select(self.frameElement).style("height", height + "px");
.land {
  fill: #FF0000;
}

.county-boundary {
  fill: none;
  stroke: #FF0000;
  stroke-width: .5px;
}

.state-boundary {
  fill: none;
  stroke: #FF0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

2

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.