我尝试使用xml文件（override api生成的xml osm）中的d3来绘制圆。我得到了一个错误TypeError: null is not an object (evaluating 'node.getAttribute')。我已经能够使用geojson & csv数据绘制几何图形，但只是在使用xml时遇到了困难。我错过了什么？
当然，我的目标是显示xml文件中的4个节点。
于飞：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projection = d3.geoMercator()
.scale(21000000)
.center([-122.29576905, 37.890256])
.translate([width / 3, height / 4])
d3.xml("entrance-exit.xml", function ready(error, xml) {
svg
.selectAll("myCircles")
.data(xml.documentElement.getElementsByTagName("node"))
.enter()
.append("myCircles")
.attr("cx", function(d) { return d.getAttribute("lon"); })
.attr("cy", function(d) { return d.getAttribute("lat"); })
.attr("r", 8)
.style("fill", "blue")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill-opacity", 1);
})
</script>
</body>
</html>可扩展标记语言：
<?xml version="1.0" encoding="UTF-8"?>
<osm version="0.6" generator="Overpass API 0.7.59 e21c39fe">
<note>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</note>
<meta osm_base="2022-11-01T11:22:37Z"/>
<bounds minlat="37.8885000" minlon="-122.2966000" maxlat="37.8906000" maxlon="-122.2945000"/>
<node id="10054221950" lat="37.8899635" lon="-122.2960219">
<tag k="entrance" v="yes"/>
</node>
<node id="10054221951" lat="37.8894885" lon="-122.2951210">
<tag k="entrance" v="yes"/>
<tag k="wheelchair" v="yes"/>
</node>
<node id="10091017732" lat="37.8894072" lon="-122.2952833">
<tag k="entrance" v="yes"/>
<tag k="ref" v="25"/>
</node>
<node id="10091017733" lat="37.8894276" lon="-122.2951869">
<tag k="entrance" v="yes"/>
<tag k="ref" v="26"/>
</node>
</osm>
1条答案
按热度按时间wxclj1h51#
我没有得到你的错误时，试图重现您的情况下使用您的代码，但我发现几个错误，应该得到修复，以显示点。
首先，我用一个简单的SVG
circle元素替换了myCircles标记，然后使用投影的结果设置cx和cy属性（显然您还没有使用投影）：然后，根据SVG元素的大小，这些点可能会超出范围，因此请相应地调整比例以查看它们。