在d3.js地图中如何在每个国家/地区创建一个圆圈？

Question

我是d3.js的新用户。我在d3中使用world map创建了json(geojson)。

现在我想在每个svg circle上创建一个单独的country。我不知道如何创建。请帮助任何一个。我在下面添加了我的小提琴链接。请看看并帮助我。感谢

我的小提琴链接 - http://jsfiddle.net/sam0kqvx/18/

Answer 1

使用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+")";
  });

更新了fiddle。