CODEWITHSUNDEEP
javascriptjsond3.jspath
FrankJ
FrankJ

Reputation: 3

D3: Having trouble selecting a path from json data

I'm having trouble assigning an id to the paths from an external json file of coordinates, despite reading numerous questions and answers that others have posted on the matter. The data in the file looks like this (it's also referenced in the header of my html, see below):

var neighborhoods_json = {
"type": "FeatureCollection",                                                                                
"features": [
{ "type": "Feature", "properties": { "Name": "Roslindale", "density": 5.5800 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.1259, 42.2720 ], [ -71.1257, 42.2723 ], [ -71.1256, 42.2724 ], [ -71.1255, 42.2725 ],....

I've seen other people ask this same question, and the answer was the add this line to create the id for each path:

 .attr("id", function(d) {return d.id;})

but my json data doesn't contain an id, so I thought I'd use the Name instead:

 .attr("id", function(d) {return d.Name;})

I then tried to select one of the paths created, using Name as id. The idea was to simply select one of the paths, and then change the color of its fill to red. But I'm either not assigning the ids correctly, or not selecting the path correctly. Can anyone tell me what I'm doing wrong?

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://maptimeboston.github.io/d3-maptime/example3/neighborhoods.js"></script>
</head>
<body>
    <script>
        var width = 700,
            height = 580;

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

        var neighborhoods = svg.append( "g" );

        var albersProjection = d3.geo.albers()
          .scale( 190000 )
          .rotate( [71.057,0] )
          .center( [0, 42.313] )
          .translate( [width/2,height/2] );

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

        neighborhoods.selectAll( "path" )
          .data( neighborhoods_json.features )
          .enter()
          .append("path")
            .attr( "d", geoPath)
            .attr("id", function(d) {return d.Name;})
            .attr("fill", "steelblue");

        neighborhoods.select("path#Roslindale")
            .attr("fill", "red");

    </script>

Upvotes: 0

Views: 150

Answers (1)

Juan Barrientos
Juan Barrientos

Reputation: 36

In you id function the Name property is nested inside a properties property

neighborhoods.selectAll( "path" )
          .data( neighborhoods_json.features )
          .enter()
          .append("path")
            .attr( "d", geoPath)
            .attr("id", function(d) {return d.properties.Name;})
            .attr("fill", "steelblue");

Working jsfiddle

Upvotes: 2

Related Questions