d3 choropleth - 从 osm / overpass api xml 文件绘图的问题答案

【问题标题】：d3 choropleth - issue plotting from osm / overpass api xml filed3 choropleth - 从 osm / overpass api xml 文件绘图的问题
【发布时间】：2022-11-04 16:52:24
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： xml d3.js choropleth overpass-api

【解决方案1】：

尝试使用您的代码重现您的案例时，我没有收到您的错误，但我发现了几个应该修复的错误以显示这些点。

首先，我用一个简单的 SVG circle 元素替换了 myCircles 标记，然后我使用投影结果（您显然没有使用过）设置 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 元素大小，这些点可能超出范围，因此请相应地调整比例以查看它们。

【讨论】：