从.json文件在svg地图上绘制多边形_Json_D3.js_Geojson_D3.geo

从.json文件在svg地图上绘制多边形

json d3.js

从.json文件在svg地图上绘制多边形,json,d3.js,geojson,d3.geo,Json,D3.js,Geojson,D3.geo,我想在用下面的程序实现的.svg地图上画一些多边形。多边形在单独的.json文件中指定（参见示例）。是否可以使用“绘制”功能来绘制地图？有更好的方法吗？不幸的是，我不是html专家，无法找到如何做到这一点。有人能帮我吗 <!DOCTYPE html> <html> <head> <title>World Map</title> <meta charset="utf-8"> <script src="ht

我想在用下面的程序实现的.svg地图上画一些多边形。多边形在单独的.json文件中指定（参见示例）。是否可以使用“绘制”功能来绘制地图？有更好的方法吗？不幸的是，我不是html专家，无法找到如何做到这一点。有人能帮我吗

<!DOCTYPE html>
<html>

<head>
  <title>World Map</title>
  <meta charset="utf-8">

  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    path {
      fill: red;
      stroke: #000;
      stroke-width: .1px;
    }
    .graticule {
      fill: none;
      stroke: #000;
      stroke-width: .2px;
    }
    .foreground {
      fill: none;
      stroke: #333;
      stroke-width: 1.2px;
    }

  </style>
</head>

<body>
  <svg width="960" height="600"></svg>
  <script>
    const svg = d3.select("svg")
    const myProjection = d3.geoAitoff()
    const path = d3.geoPath().projection(myProjection)
    const graticule = d3.geoGraticule()
    function drawMap(err, world) {
      if (err) throw err
      svg.append("g")
        .selectAll("path")
        .data(topojson.feature(world, world.objects.land).features)
        .enter().append("path")
        .attr("d", path);

      svg.append("path")
        .datum(graticule.outline)
        .attr("class", "foreground")
        .attr("d", path);

    }
    d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap)

  </script>
</body>

</html>

您的json是geojson，它的格式与您将topojson转换为的格式相同，因此您可以以相同的方式附加它：

svg.append（“g”）.selectAll（“path”）.data（geojson）.enter（）.append（“path”）.attr（“d”，path）

Hi@Andrew。谢谢你的回答。我将文件命名为“triangles.json”，并尝试添加以下行：``function drawPolygons（err，data）{if（err）throw err svg.append（“g”）.selectAll（“path”）.data（geojson）.enter（）.append（“path”）.attr（“d”，path）；}d3.json（“triangles.json”，drawPolygons）``但是我仍然无法可视化多边形。我做错了什么？对不起，您需要向.data（）传递一个包含特性的数组，而不是geojson对象，这样您就可以使用

geojson.features

，非常感谢！它工作得很好。您的json是geojson，它的格式与您将topojson转换为的格式相同，因此您可以使用相同的方式附加它：

svg.append（“g”）.selectAll（“path”）.data（geojson）。enter（）.append（“path”）.attr（“d”，path）

geojson.features

，非常感谢！它工作得很好。


{
"type": "FeatureCollection",                                                      
"features": [
{ "type": "Feature", "properties": {
    "fill": "#ffff00"
},
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[50.0, 0.0], [-50.0, 0.0], [0.0, 20.0], [50.0, 0.0]]]
} },
{ "type": "Feature","properties": {
    "fill": "#ff00ff"
}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[70.0, 20.0], [-30.0, 0.0], [0.0, 50.0], [70.0, 20.0]]]
} }
]
}