CODEWITHSUNDEEP
svgd3.jstopojson
GowriShankar
GowriShankar

Reputation: 1654

In d3.js geo map how to create a circle over the each country?

Am new to d3.js.I was created a world map with using json(geojson) in d3.

Now i want to create a seperate svg circle over each country.I dont know how to create.Please help any one.I added my fiddle link below.Please take a look and help me.Thanks

My Fiddle Link - http://jsfiddle.net/sam0kqvx/18/

Upvotes: 2

Views: 2224

Answers (1)

Mark
Mark

Reputation: 108537

Use projection(d3.geo.centroid(d));:

svg.selectAll(".dots")
  .data(topojson.feature(world, world.objects.countries).features)
  .enter()
  .append("circle")
  .attr("r","6")
  .attr("fill","black")
  .attr("transform",function(d){                 
    var p = projection(d3.geo.centroid(d)); //<-- centroid is the center of the path, projection maps it to pixel positions
    return "translate("+p+")";
  });

Updated fiddle.

Upvotes: 3

Related Questions