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

Question

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

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

我的 fiddle 链接 - http://jsfiddle.net/sam0kqvx/18/

Answer 1

使用投影(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 .