Tengo un mapa, que pueden encontrar en el siguiente link:
Quiero pintar todos los bordes de los estados en color rojo, pero los bordes externos no quedan pintados del color rojo. Qué puedo hacer?
Tengo un mapa, que pueden encontrar en el siguiente link:
Quiero pintar todos los bordes de los estados en color rojo, pero los bordes externos no quedan pintados del color rojo. Qué puedo hacer?
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>