使用 d3 可视化传单上的点

Question

我想在传单地图上通过 d3 渲染来自 .json 文件的点。我发现的唯一三篇有前途的文章是： http://bost.ocks.org/mike/leaflet/;

https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-leaflet-map-with-d3js-objects-that-scale-with-the-map

但是，我无法将其转移到我的问题上。第一个 link 用 polygons 来做，第二个 link 太复杂了。第三个好像不行...

这就是我得到的。

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="d3.min.js" charset="utf-8"></script>

  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>
  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // synchroize d3 and leaflet
  var svg = d3.select(map.getPanes().overlayPane).append("svg"),
  g = svg.append("g").attr("class", "leaflet-zoom-hide");

  // but how to draw the points on the map?!

  // load a tile layer
  L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
    minZoom: 0,
    maxZoom: 20,
    ext: 'png'
    }).addTo(map);

  </script>
</body>
</html>

我的问题是：如何从 .json 中提取我需要的信息，然后将其用作 .svg 以覆盖我的传单地图？

城市数据来自：Made with Natural Earth。免费矢量和栅格地图数据@ naturalearthdata.com.

Answer 1

看@你的cities.json都是积分

因此您将不得不使用此演示来呈现您的点 http://bl.ocks.org/sumbera/10463358。

因为您已经有了正确格式的分数，所以您不需要 reformat function:

function reformat(array) {
                var data = [];
                array.map(function (d, i) {

                    data.push({
                        id: i,
                        type: "Feature",
                        geometry: {
                            coordinates: [+d.longitude, +d.latitude],
                            type: "Point"
                        }


                    });
                });
                return data;
            }
            var geoData = { type: "FeatureCollection", features: reformat(incidents) };

相反，您只需要这样做：

d3.json('https://gist.githubusercontent.com/cyrilcherian/92b8f73dcbbb08fd42b4/raw/087202976663f9f3192bec8f0143cf3bc131c794/cities.json', function(error, incidents) {
      //load the json data
      var geoData = incidents;
      //put the data in the quad tree
      var qtree = d3.geom.quadtree(geoData.features.map(function(data, i) {
        return {
          x: data.geometry.coordinates[0],
          y: data.geometry.coordinates[1],
          all: data
        };
      }));

现在用四叉树得到需要显示的点

如果您想知道什么是四叉树，请阅读这篇文章here

工作示例here

编辑

没有四叉树优化的绘制点的工作示例是here

希望对您有所帮助！

使用 d3 可视化传单上的点

Visualizing Points on leaflet with d3

javascript

d3.js

leaflet