Визуализация точек на листочке с d3

Я хочу визуализировать точки, исходящие из файла .json через d3 на карточке листовки. Единственными тремя многообещающими статьями, которые я нашел, являются: http://bost.ocks.org/mike/leaflet/;Визуализация точек на листочке с d3

http://bl.ocks.org/sumbera/10463358 и

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

Однако, я не могу передать, что к моей проблеме. Первая ссылка делает это с polygons, а вторая ссылка сложна. Третий, похоже, не работает ...

Это то, что я получил.

<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 наложить мою листовку карту с?

Данные Citiy от: Сделано с Природной Землей. Бесплатные векторные и растровые данные карты @ naturalearthdata.com.

источник

2016-01-18 Stophface

Ищете @ ваши города.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

EDIT

рабочего пример рисование точки SANS оптимизации четырехъядерного древесном here

Надеется, что это помогает!

источник

2016-01-19 05:49:17 Cyril

Почему мне нужно использовать quadtree для рисования SVG над лифтом? Quadtree определяет точки в окне extend ?! – Stophface

Квадратное дерево используется здесь, чтобы показать/нарисовать только точки в области обзора. Если вы нарисуете все точки, это будет слишком тяжелым ... и медленным. – Cyril

yep, я это понимаю. Но это не объясняет, как я рисую SVG на карте листовка ... думаю, что я ищу, начинается здесь (http://plnkr.co/edit/HSD3B8WEgJ0ucNp3qO3I?p=preview) где-то в строке 147 ... – Stophface

Визуализация точек на листочке с d3

ответ

Смежные вопросы