2
我遵循標準的「Let’s Make a Map」教程 - 但爲了讓事情變好，我將它與one about Germany合併 - 所以我正在處理稍微不同的數據。莫名其妙地無法在d3.js地圖上渲染城市名稱標籤：超出範圍NAME？
事情到目前爲止工作 - barring this minor hiccup - 但現在我已經到了「#Displaying Places」部分，這是你應該在地圖上顯示城市名稱的地方。
的問題是發生在下面一行：
.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>
編輯
預計
實際
看看這個答案：http://stackoverflow.com/questions/37635547/interactive-graph-of-europe-using-d3/37644652 – Klaujesi
@Klaujesi這不是真的非常有幫助 - 對這個問題的答案很長，看起來很普遍 - 是否有一個特定的部分，你認爲我應該看看？ –
你的topojson'places'沒有名字，只是點的座標。 topojson.feature（de，de.objects.places）.features < - 不給你一個。名稱只是點的座標 – Klaujesi