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

Question

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

现在我想在每个 country 上创建一个单独的 svg circle。我不知道如何 create.Please 帮助任何 one.I 添加我的 fiddle link below.Please 看一看帮助me.Thanks

我的FiddleLink-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。

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

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

svg

d3.js

topojson