Javascript D3显示国家名称的地图

我正在尝试创建一个d3地图，显示所有国家的名称

地球仪：

当我试着展示这些国家时，世界将变得一团糟：

var app=angular.modulemyapp，[]； app.directiveglobe，函数{ 返回{ 限制：'E'， 范围：{ 数据：'=？' }, 模板： + + + , 链接：链接 }; 函数链接范围、元素、属性{ 变量宽度=500，高度=宽度， 投射,路径,， svg、功能、分划、， mapJson=https://gist.githubusercontent.com/GordyD/49654901b07cb764c34f/raw/27eff6687f677c984a11f25977adaa4b9332a2a9/countries-and-states.json', 状态、状态集、国家、国家/地区集、缩放； 投影=d3.geo.正交 .平移[宽度/2，高度/2] .刻度250 C.clipAngle90 .精度0.1 .旋转[0，-30]； path=d3.geo.path .投射投射； svg=d3.selectelement[0]。选择“.globe” .append'svg' .attr'width'，width .attr'height'，height .attr'viewBox'，0,0'，+宽度+'，'高度； features=svg.append'g'； 特性。附加“路径” .datum{type:'Sphere'} .attr'class'，'background' .attr'd'，路径； 分划=d3.geo.gracile； 特性。附加“路径” .基准分划 .attr'class'，'gracile' .attr'd'，路径； zoom=d3.geo.zoom .投影投影 .scaleExtent[projection.scale*0.7，projection.scale*8] .on'zoom.redraw'，函数{ d3.event.sourceEvent.preventDefault； svg.selectAll'path'.attr'd'，path； }; d3.jsonmapJson，functionerror，world{ states=topojson.featureworld，world.objects.states.features； countries=topojson.featureworld，world.objects.countries.features； stateSet=drawFeatureSet'state'，状态； countrySet=drawFeatureSet'country'，国家/地区； d3.选择所有“路径”。调用缩放； }; 函数drawFeatureSetclassName，featureSet{ var set=features.selectAll'.+className .datafeatureSet 进来 .附加“g” .attr'class'，className .attr'data-name'，函数d{ 返回d.properties.name； } .attr'data-id'，函数d{ 返回d.id； }; set.appendtext .类别、国家/地区标签 .attrtransform，函数d{console.logd，d；返回translate+path.centroidd+；} .textfunctiond{return d.properties.name；} .attrx，函数d{ 返回路径。质心[0]； } .attry，函数d{ 返回路径。质心[1]； }; set.append'path' .attr'class'，'land' .attr'd'，路径； set.append'path' .attr'class'，'overlay' .attr'd'，路径 .attr'style'，函数d{ if范围数据[d.id]{ 返回'fill opacity:'+scope.data[d.id]/100； } } .单击，功能正常{ var val=scope.data[d.id]？scope.data[d.id]：0； d3.selectelement[0]。选择“.info”.htmld.properties.name+”：“+val； 旋转聚焦； }; 返回集； } 函数旋转焦点{ var coords=d3.geo.centroidx； coords[0]=-coords[0]； coords[1]=-coords[1]； d3.过渡 .持续时间1250 .tween'rotate'，函数{ var r=d3.interpolateprojection.rotate，坐标； 返回函数{ 旋转投影； svg.selectAll'path'.attr'd'，path； }; } 过渡 } } }; A. pp.controllerctrl1，函数$scope，$log{ $scope.data={}； }; app.run； svg{ 宽度：100% } 路径{ 填充：无； 笔画：黑色 } .背景{ 填充：RGBA200212220.5； 笔划宽度：.8px； 笔画：黑色； } .分划{ 行程：rgba0,0,0,2； 笔划宽度：.5px； } .国家{ 光标：指针； } .country.land、.state.land{ 填充物：白色； 行程：rgba0,0,0,2； 笔画宽度3倍； } .州.覆盖{ 填充：蓝色； 填充不透明度：0； } .国家，覆盖{ 填充物：橙色； 填充不透明度：0； } .国家标签{ 填充：777； 填充不透明度：.5； 字体大小：20px； 字体大小：300； 文本锚定：中间； } 这样试试

                set.append("text")
                        .attr("class", "country-label")
                        .attr("transform", function(d) { console.log("d", d); return "translate(" +           path.centroid(d) + ")"; })
                        .text(function(d) { return d.properties.name; })
                        .attr("dx", function (d) {
                        return "0.3em";

                    })
                    .attr("dy", function (d) {
                        return "0.35em";
                    })
                    .style('fill', 'black');