Question

我正在使用dc.js，我正要创建一张世界地图。如何添加国家＆＃39; geochoropleth地图上的名字？

Answer 1

我在这里创建了这种方法的粗略示例：http://jsfiddle.net/djmartin_umich/9VJHe/

1）首先，我获得了包含所有状态的质心的json文件：https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data/us-state-centroids.json。出于本示例的目的，我将json复制到了jsfiddle。

   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");

以下是最终结果： enter image description here

您会注意到两个问题：

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

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

请注意，我使用此问题作为答案的基础：https://groups.google.com/forum/#!topic/d3-js/uAWkwnuNQ3Q

如何在geochoropleth地图上添加国家/地区名称？

1 个答案: