我正在嘗試使用 d3 從 xml 檔案（由立交橋 api 生成的 xml osm）繪制圓圈。我收到一個錯誤TypeError: null is not an object (evaluating 'node.getAttribute')。我已經能夠使用 geojson 和 csv 資料繪制幾何圖形，但我只是在為 xml 苦苦掙扎。我錯過了什么？
當然，我的目標是顯示 xml 檔案中的 4 個節點。
HTML：
<!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:
<?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>
uj5u.com熱心網友回復：
嘗試使用您的代碼重現您的案例時，我沒有收到您的錯誤，但我發現了幾個應該修復的錯誤以顯示這些點。
首先，我將myCircles標簽替換為一個簡單的 SVGcircle元素，然后使用投影結果（您顯然沒有使用過）設定 cx 和 cy 屬性：
svg
.selectAll("circle")
.data(xml.documentElement.getElementsByTagName("node"))
.enter()
.append("circle")
.each(function (d) {
const projected = projection([
d.getAttribute("lon"),
d.getAttribute("lat"),
]);
d3.select(this).attr("cx", projected[0]).attr("cy", projected[1]);
})
...
然后根據您的 SVG 元素大小，這些點可能超出范圍，因此請相應地調整比例以查看它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529620.html
下一篇：帶有連接節點的鏈接的聚集氣泡