D3: Having trouble selecting a path from json data
Question
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>
1 answers
solution1
2 ACCPTED 2016-07-28 03:49:29
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");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.