在3d.js中绘制GeoJSON

GeoJSON draw in 3d.js

本文关键字：绘制 GeoJSON js 3d      更新时间：2023-09-26

我正在使用库cartogramm .js(在这里您可以看到它如何工作的示例)

http://prag.ma/code/d3-cartogram/netmigrate/2011

我正在尝试做同样的事情，并使用以下代码:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>cartogram</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript" src="http://prag.ma/code/d3-cartogram/cartogram.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
      <svg id="map"></svg>
    <script type="text/javascript">
    var cartogram = d3.cartogram()
  .projection(d3.geo.albersUsa())
  .value(function(d) {
    return Math.random() * 100;
  });
 d3.json("https://raw.githubusercontent.com/shawnbot/d3-cartogram/master/data/us-states.topojson", function(topology) {
  var features = cartogram(topology, topology.objects.states.geometries);
     console.log(features);
  d3.select("svg").selectAll("path")
    .data(features)
    .enter()
    .append("path")
      .attr("d", cartogram.path);
 });
 </script>
  </body>
</html>

我的问题是什么都没有出现，也没有错误。我确信GeoJSON文件被调用和处理。我该怎么显示地图?我是d3.js的新手。有什么问题吗?我的json是相同的链接。

selection.data()只接受数组作为数据。在您的示例中，features不是一个数组，它是一个包含属性features和属性arcs的复杂对象。

使用features.features(以及扩展svg的尺寸)时显示地图:

d3.select("svg")
    .attr("width", 1000)
    .attr("height", 500)
  .selectAll("path")
    .data(features.features)
    .enter()
  .append("path")
    .attr("d", cartogram.path);
相关文章：