CODEWITHSUNDEEP
javascriptsvgd3.js
Joshua Noble
Joshua Noble

Reputation: 894

d3 how to add ID from geojson to path

I have the following geojson file that represents each state of India, as a quick example, one declaration looks like so (with the coordinates removed for brevity):

    {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {}, "id":"AndhraPradesh", "geometry": { "type": "MultiPolygon", "coordinates": [ ......

I'm trying to get the paths of the generated SVG to have the id of its geojson shape, so that I would have something like:

<svg width="600" height="600"><g id="india"><path id="AndhraPradesh" d="..."></path>

Something like the following and variations on it don't seem to work and I can't find examples that explicitly associate the paths with an id, so I'm not sure what the secret might be. 

  var w = 600;
  var h = 600;
  var proj = d3.geo.mercator();
  var path = d3.geo.path().projection(proj);
  var t = proj.translate(); // the projection's default translation
  var s = proj.scale() // the projection's default scale

  var map = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
      .call(initialize);

  var india = map.append("g")
      .attr("id", "india");

  d3.json("india_states.geojson", function (json) {
    india.selectAll("path")
      .data(json.features)
      .enter().append("path")
      .attr("d", path)
      .attr("id", id)
  });

Any help much appreciated.

Upvotes: 0

Views: 712

Answers (1)

ValarDohaeris-fuck-OpenAI
ValarDohaeris-fuck-OpenAI

Reputation: 6328

This should do the trick:

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

It returns the id field of the data associated with the path.

Upvotes: 3

Related Questions