Javascript 无法在d3.js地图上呈现城市名称标签：超出范围名称？_Javascript_Json_D3.js

Javascript 无法在d3.js地图上呈现城市名称标签：超出范围名称？

javascript json d3.js

Javascript 无法在d3.js地图上呈现城市名称标签：超出范围名称？,javascript,json,d3.js,Javascript,Json,D3.js,我正在遵循规范的“”教程-但为了增加趣味性，我正在将其与之融合-因此我正在使用稍微不同的数据到目前为止一切都很顺利，但现在我来到了“展示地点”部分，在这里你应该在地图上显示城市的名称问题发生在以下行中： .text(function(d) { if (d.properties.name!=="Berlin" && d.properties.name!=="Bremen"){ //for some

我正在遵循规范的“”教程-但为了增加趣味性，我正在将其与之融合-因此我正在使用稍微不同的数据

到目前为止一切都很顺利，但现在我来到了“展示地点”部分，在这里你应该在地图上显示城市的名称

问题发生在以下行中：

   .text(function(d) {
        if (d.properties.name!=="Berlin" &&
            d.properties.name!=="Bremen"){

                //for some reason this is undefined
                console.log(d.properties.name);
                return d.properties.name;
        }
    })

console.log（d.properties.name）的值总是未定义的，我不知道为什么
我想这是因为name
超出了d
的范围-但我不知道如何修复它是这样吗？如果是，如何修复？如果没有-真正的问题是什么？
下面是我的代码的样子-非常简洁：
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.subunit{fill:#fff;}
.subunit.Nordrhein-Westfalen{ fill: #aba; }
.subunit.Baden-Württemberg{ fill: #bab; }
.subunit.Hessen{ fill: #bcb; }
.subunit.Niedersachsen{ fill: #cbc; }
.subunit.Thüringen{ fill: #cdc; }
.subunit.Hamburg{ fill: #dcd; }
.subunit.Schleswig-Holstein{ fill: #ded; }
.subunit.Rheinland-Pfalz{ fill: #ede; }
.subunit.Saarland{ fill: #efe; }
.subunit.Sachsen-Anhalt{ fill: #fef; }
.subunit.Brandenburg{ fill: #aaa; }
.subunit.Mecklenburg-Vorpommern{ fill: #bbb; }
.subunit.Bayern { fill: #ccc; }
.subunit.Sachsen { fill: #ddd; }
.subunit.Bremen { fill: #eee; }
.subunit.Berlin { fill: #fff; }

.subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}


.place,
.place-label {
  fill: #444;
  font-size:14px;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  pointer-events: none;
}


</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 1160;

var projection = d3.geo.mercator()
    .center([10.5, 51.35])
    .scale(3000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("de.json", function(error, de) {

    //colouring the different subunits
    svg.selectAll(".subunit")
       .data(topojson.feature(de, de.objects.subunits).features)
       .enter().append("path")
       .attr("class", function(d) {
        // console.log(d.properties.name);
        return "subunit " + d.properties.name;
       })
       .attr("d", path);

    //adding a border to the states
    svg.append("path")
        .datum(topojson.mesh(de, de.objects.subunits, function(a,b) {
            if (a!==b ||
                a.properties.name === "Berlin"||
                a.properties.name === "Bremen"){
                    var ret = a;
                }
                    return ret;
                }))
        .attr("d", path)
        .attr("class", "subunit-boundary");

    // add small black dots for populated places
    svg.append("path")
       .datum(topojson.feature(de, de.objects.places))
       .attr("d", path)
       .attr("class", "place");



    //trying to display names of cities
    svg.selectAll(".place-label")
       .data(topojson.feature(de, de.objects.places).features)
       .enter().append("text")
       .attr("class", "place-label")
       .attr("transform", function(d) {

            //small test
            //console.log( "translate(" + projection(d.geometry.coordinates) + ")" );

            return "translate(" + projection(d.geometry.coordinates) + ")";
        })
       .attr("dy", ".35em")
       .text(function(d) {
            if (d.properties.name!=="Berlin" &&
                d.properties.name!=="Bremen"){

                    //for some reason this is undefined
                    console.log(d.properties.name);
                    return d.properties.name;
            }
        })
       .attr("x", function(d) {
            return d.geometry.coordinates[0] > -1 ? 6 : -6;
        })
       .style("text-anchor", function(d) {
            return d.geometry.coordinates[0] > -1 ? "start" : "end";
       });



});

</script>


.subunit{fill:#fff；}
Nordrhein Westfalen{fill:#aba；}
.subunit.Baden-Württemberg{fill:#bab；}
.subunit.Hessen{fill:#bcb；}
.subunit.Niedersachsen{fill:#cbc；}
.subunit.Thüringen{fill:#cdc；}
.subunit.Hamburg{fill:#dcd；}
石勒苏益格-荷尔斯泰因{fill:#ded；}
.subunit.Rheinland Pfalz{fill:#ede；}
.subunit.Saarland{fill:#efe；}
.subunit.Sachsen-Anhalt{fill:#fef；}
.subunit.Brandenburg{fill:#aaa；}
Mecklenburg-Vorpomern{fill:#bbb；}
拜仁{fill:#ccc；}
.subunit.Sachsen{fill:#ddd；}
不来梅{fill:#eee；}
.subunit.Berlin{fill:#fff；}
.亚单位边界{
填充：无；
行程：777；
笔划数组：2,2；
笔划线条连接：圆形；
}
.地点，
.放置标签{
填充：#444；
字体大小：14px；
}
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：20px；
指针事件：无；
}
可变宽度=960，
高度=1160；
var projection=d3.geo.mercator（）
.中间（[10.5,51.35]）
.比例尺（3000）
.翻译（[宽度/2，高度/2]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“de.json”，函数（错误，de）{
//给不同的亚单位着色
svg.selectAll（“.subunit”）
.data（topojson.feature（de，de.objects.subunits.features）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{
//console.log（d.properties.name）；
返回“subunit”+d.properties.name；
})
.attr（“d”，路径）；
//为各州添加边界
追加（“路径”）
.datum（topojson.mesh（de，de.objects.subunits，function）（a，b）{
如果（a！==b||
a、 properties.name==“柏林”||
a、 properties.name==“不来梅”）{
var-ret=a；
}
返回ret；
}))
.attr（“d”，路径）
.attr（“类”、“子单元边界”）；
//为人口稠密的地方添加黑色小点
追加（“路径”）
.datum（topojson.feature（de，de.objects.places））
.attr（“d”，路径）
.attr（“类别”、“地点”）；
//尝试显示城市名称
svg.selectAll（“.place label”）
.data（topojson.feature（de，de.objects.places）.features）
.enter（）.append（“文本”）
.attr（“类别”、“位置标签”）
.attr（“转换”，函数（d）{
//小测验
//log（“translate”（“+投影（d.geometry.coordinates）+”）；
返回“平移（“+投影（d.geometry.coordinates）+”）；
})
.attr（“dy”，“.35em”）
.文本（功能（d）{
如果（d.properties.name！=“柏林”&&
d、 properties.name！=“不来梅”）{
//由于某些原因，这是未定义的
console.log（d.properties.name）；
返回d.properties.name；
}
})
.attr（“x”，函数（d）{
返回d.geometry.坐标[0]>-1？6:-6；
})
.样式（“文本锚定”，功能（d）{
返回d.geometry.坐标[0]>-1？“开始”：“结束”；
});
});


编辑
期望

实际的
在.topojson中，您有两个部分：

属性：县和多边形的名称
地点：点的坐标

您可以通过以下方式访问第一个集合：
de.objects.subunits

第二次收集通过：
de.subunits.places

将文件分别加载到两个不同的变量中以使用它：
d3.json("de.json", function(error, de) {
    var counti = topojson.feature(de, de.objects.subunits)
    var places = topojson.feature(de, de.objects.places)

然后引用内容adding.features
   .data(counti.features)   // <-- to draw your paths and get the .name: München

你有：
 {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [
      11.573039376427117,
      48.131688134368815
    ]
  }

Mike的点属性如下所示：

和点坐标

您的点属性：

解决方案：
正确的方法

在GIS软件（ArcGIS pay，Q-GIS-free）上打开地图，编辑并更正路径和点属性，然后再次导出为TopoJSON-

简易方法

转到：加载您的json并将属性名称添加到您的点（16点，easy cake），然后再次另存为TopoJSON-


现在你有正确的国家信息删除一列（你有重复的信息）
在.topojson中，您有两个部分：

属性：县和多边形的名称
地点：点的坐标

您可以通过以下方式访问第一个集合：
de.objects.subunits

第二次收集通过：
de.subunits.places

将文件分别加载到两个不同的变量中以使用它：
d3.json("de.json", function(error, de) {
    var counti = topojson.feature(de, de.objects.subunits)
    var places = topojson.feature(de, de.objects.places)

然后引用内容adding.features
   .data(counti.features)   // <-- to draw your paths and get the .name: München

你有：
 {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [
      11.573039376427117,
      48.131688134368815
    ]
  }

Mike的点属性如下所示：

和点坐标

您的点属性：

解决方案：
正确的方法

在GIS软件（ArcGIS pay，Q-GIS-free）上打开地图，编辑并更正路径和点属性，然后再次导出为TopoJSON-

简易方法

转到：加载您的json并将属性名称添加到您的点（16点，easy cake），然后再次另存为TopoJSON-