1

I have a D3 map of the US. I want to be able to change the color of the border for a given state. However, it appears that when I do the topojson.mesh it creates on path for all the state borders. What can I do to create a different path for each state?

d3.json("../json/us_states_topo.json", function(error, us) {                
    var features = svg.append("g"); 
    features
        .attr("class", "state")
        .selectAll("path")
        .data(topojson.feature(us, us.objects.layer1).features)
        .enter().append("path") 
        .attr("d", path)
        .attr("id", function(d) {  
            return d.properties.STATE;
        })
        features.append("path")
            .attr("class",function(d) { return "state-boundaries";})
            .datum(topojson.mesh(us, us.objects.layer1, function(a, b) { return a !== b }))
            .attr("d", path)
Brian
  • 201
  • 2
  • 16
  • 1
    Have you tried using `topojson.features` along the lines of [this example](http://bl.ocks.org/mbostock/4122298)? – Lars Kotthoff Nov 17 '14 at 14:50
  • thank you, that was helpful. I have figured out how to color a states individual border now. But for some reason it is not getting the entire border. See VT and ME in this example, colored green.http://www.270towin.com/2015-senate/test.html – Brian Nov 19 '14 at 02:38
  • It looks like this problem is caused by the order of the elements. That is, the border is coloured correctly, but obscured by the other states in front of it which makes it appear as if it was only partially coloured. Move the element you want to highlight to the front to avoid this. See e.g. [this question](http://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3) for that. – Lars Kotthoff Nov 19 '14 at 09:25

0 Answers0