D3.js topojson.js:187:uncaughttypeerror:无法读取属性'；类型'；未定义的
我正在尝试用D3和TopoJSON为荷兰绘制地图，包括各省。 代码如下：D3.js topojson.js:187:uncaughttypeerror:无法读取属性'；类型'；未定义的,d3.js,D3.js,我正在尝试用D3和TopoJSON为荷兰绘制地图，包括各省。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
<script type="text/javascript" src="http://localhost/webserver/topojson/topojson.js"></script>
<style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
margin-right: 2px;
}
.pumpkin {
fill: rgba(128, 0, 128, 0.75);
stroke: yellow;
stroke-width: 5;
}
.apple {
fill: rgba(0, 255, 0, 0.55);
stroke: green;
stroke-width: 15;
}
.orange {
fill: rgba(255, 255, 0, 0.55);
stroke: orange;
stroke-width: 10;
}
.subunit { fill: #cdc; }
.subunit-label {
fill: #777;
fill-opacity: .25;
font-size: 30px;
font-weight: 300;
text-anchor: middle;}
.provincie {fill: none; }
.Utrecht {fill: #ddd; }
.Zuid-Holland {fill: #dde; }
.Noord-Holland {fill: #dee; }
.Drenthe {fill: #aae; }
.Gelderland {fill: #eee; }
.Friesland {fill: #ddc; }
.Groningen {fill: #dcc; }
.Limburg {fill: #ccc; }
.Noord-Brabant {fill: #ddb; }
.Overijssel {fill: #dbb; }
.Zeeland {fill: #bbb; }
</style>
</head>
<body>
<script type="text/javascript">
var width = 960, height = 860;
var projection = d3.geo.albers()
.center([6, 49.40])
.rotate([0, -1.9])
.parallels([50, 60])
.scale(11000)
.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("http://localhost/webserver/data/nl.json", function(error, nl) {
svg.selectAll(".subunit")
.data(topojson.object(nl, nl.objects.subunits).geometries)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
svg.selectAll(".subunit-label")
.data(topojson.object(nl, nl.objects.subunits).geometries)
.enter().append("text")
.attr("x", -20)
.attr("y", -50)
.attr("class", function(d) { return "subunit-label " + d.id; })
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.properties.name; });
svg.selectAll(".provincie")
.data(topojson.object(nl, nl.objects.provincies).geometries)
.enter().append("path")
.attr("class", function(d) { return "provincie " + d.properties.name; })
.attr("d", path);
svg.append("path")
.datum(topojson.object(nl, nl.objects.places))
.attr("d", path)
.attr("class", "place");
svg.selectAll(".place-label")
.data(topojson.object(nl, nl.objects.places).geometries)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
.attr("dy", ".35em").text(function(d) { return d.properties.name; });
svg.selectAll(".place-label")
.attr("x", function(d) { return d.coordinates[0] > -1 ? 10 : -10; })
.style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; });
});
</script>
</body>
</html>
D3试验
酒吧{
显示：内联块；
宽度：20px；
高度：75px；
背景色：青色；
右边距：2px；
}
.南瓜{
填充：rgba（128,0,128,0.75）；
笔画：黄色；
笔画宽度：5；
}
.苹果{
填充：rgba（0,255,0,0.55）；
笔画：绿色；
笔画宽度：15；
}
.橙色{
填充：rgba（255,255,0,0.55）；
笔画：橙色；
笔画宽度：10；
}
.subunit{fill:#cdc；}
.亚单位标签{
填充：#777；
填充不透明度：.25；
字体大小：30px；
字体大小：300；
文本定位点：中间；}
.provincie{fill:none；}
.Utrecht{fill:#ddd；}
Zuid Holland先生{fill:#dde；}
Noord Holland{fill:#dee；}
.Drenthe{fill:#aae；}
.Gelderland{fill:#eee；}
.Friesland{fill:#ddc；}
.Groningen{fill:#dcc；}
.Limburg{fill:#ccc；}
.Noord Brabant{fill:#ddb；}
.Overijssel{fill:#dbb；}
.Zeeland{fill:#bbb；}
变量宽度=960，高度=860；
var projection=d3.geo.albers（）
.center（[6,49.40]）
.旋转（[0，-1.9]）
.平行线（[50,60]）
.比例尺（11000）
.翻译（[宽度/2，高度/2]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“http://localhost/webserver/data/nl.json，函数（错误，nl）{
svg.selectAll（“.subunit”）
.data（topojson.object（nl，nl.objects.subunits）.geometry）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{return“subunit”+d.id；}）
.attr（“d”，路径）；
svg.selectAll（“.subunit标签”）
.data（topojson.object（nl，nl.objects.subunits）.geometry）
.enter（）.append（“文本”）
.attr（“x”，-20）
.attr（“y”，-50）
.attr（“类”，函数（d）{返回“子单元标签”+d.id；}）
.attr（“transform”，函数（d）{return”translate（“+path.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.properties.name；}）；
svg.selectAll（“.provincie”）
.data（topojson.object（nl，nl.objects.provincies）.Geometrics）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{return“provincie”+d.properties.name；}）
.attr（“d”，路径）；
追加（“路径”）
.datum（topojson.object（nl，nl.objects.places））
.attr（“d”，路径）
.attr（“类别”、“地点”）；
svg.selectAll（“.place label”）
.data（topojson.object（nl，nl.objects.places）.geometrics）
.enter（）.append（“文本”）
.attr（“类别”、“位置标签”）
.attr（“transform”，函数（d）{return”translate（“+投影（d.坐标）+”）；}）
.attr（“dy”，“.35em”）.text（函数（d）{return d.properties.name；}）；
svg.selectAll（“.place label”）
.attr（“x”，函数（d）{返回d.坐标[0]>-1？10:-10；}）
.style（“文本锚定”，函数（d）{返回d.coordinates[0]>-1？“开始”：“结束”；}）；
});
var t=o.type，g=t==“GeometryCollection”{type:t，geometry:o.geometry.map（geometry）}看起来您正在引用拓扑中不存在的对象 TopoJSON文件是否可能使用英语拼写“省”而不是荷兰语“省”？如果使用，则
nl.objects.provincesnl.objects.provinces你能发布nl.json的内容让我们看一下吗（比如说，在dropbox上）？谢谢你的回答。我刚刚发现nl.json文件有问题，这就解决了这个问题。这很有趣。我正在尝试展示Gelderland（荷兰的一个省）的TopoJSON文件，但该文件中可能也有问题。您的
nl.json