Map 如何添加国家'；地球化学地图上的名字？

我正在使用dc.js，我将创建一个世界地图。

---

我怎样才能将这些国家的名称添加到地质地貌图上

我在这里创建了一个这种方法的粗略示例：

1） 首先，我获得了包含所有状态质心的json文件：。出于本例的目的，我将json复制到JSFIDLE

   var labels = {"type":"FeatureCollection","features":[
                    {"type":"Feature","id":"01","geometry":{"type":"Point","coordinates":[-86.766233,33.001471]},"properties":{"name":"Alabama","population":4447100}},
                    {"type":"Feature","id":"02","geometry":{"type":"Point","coordinates":[-148.716968,61.288254]},"properties":{"name":"Alaska","population":626932}},

2） 然后，我在图表中添加了一个svg元素，该元素将包含所有标签：

      var labelG = d3.select("svg")
            .append("svg:g") 
            .attr("id", "labelG") 
            .attr("class", "Title");

3） 接下来，我为json标签中的每个状态添加了一个svg文本元素：

    labelG.selectAll("text") 
       .data(labels.features) 
       .enter().append("svg:text") 

4） 然后我使用质心的坐标定位文本元素。要实现这一点，您应该使用图表的投影将坐标转换为相对的x和y值

         .attr("x", function(d){return project(d.geometry.coordinates)[0];}) 
         .attr("y", function(d){return project(d.geometry.coordinates)[1];}) 
         .attr("dx", "-1em");

以下是最终结果：

您会注意到两个问题：

• 东北部各州没有足够的空间显示所有的名字
• 标签没有很好地居中

这两个问题都可以通过手动移动坐标来更改标签来解决

注意，我使用这个问题作为回答的基础：

这个位于的新示例使用州/国家的质心放置标签：。看起来很有希望。