D3.js布魯克林TopoJSON地圖不渲染

我試圖渲染一個布魯克林的建築物和地段使用D3.js地圖。爲了完成這個任務，我也做了以下內容：D3.js布魯克林TopoJSON地圖不渲染

從MapPLUTO獲得shape文件：

http://www.nyc.gov/html/dcp/html/bytes/dwn_pluto_mappluto.shtml。

轉換shape文件到以GeoJSON具有以下ogr2ogr命令：

ogr2ogr -f以GeoJSON -LCO COORDINATE_PRECISION = 4 ----選擇 '的幾何形狀，BBL' -s_srs EPSG：2263 -t_srs EPSG：4326 BK-gll1.json BKMapPLUTO.shp

轉化以GeoJSON到TopoJSON與下列： topojson -o bkgll1-topojson.json BK-gll1.json

我已經嘗試了不同的投影，縮放和數據綁定，但我只設法呈現填充SVG視口的黑色方塊，或者什麼都不渲染。

TopoJSON和GeoJSON文件位於：https://github.com/RobertPTC/nyc_maps。同時也包括TopoJSON的截圖通過mapshaper.org

$(function() { 
    var width = 960, 
     height = 500; 
    var svg = d3.select('body').append('svg') 
     .attr('width', width) 
     .attr('height', height) 
    var projection = d3.geo.mercator() 
      .rotate([96,0]) 
      .center([-73.98, 40.70]) 
      .scale(237000) 
      .translate([width/2, height/2]) 
    var path = d3.geo.path() 
       .projection(projection) 
    d3.json('bk-gll1-topojson.json', function(error, bk) { 
      console.log(bk); 
      var featureCollection = topojson.feature(bk, bk.objects['bk-gll1']); 
      var bounds = d3.geo.bounds(featureCollection); 

      svg.append('path') 
       .datum(featureCollection) 
       .attr('d', path) 
}); 
});

作爲D3.js megafan呈現，我會大大感激，如果有人可以幫助解決這個問題！

UPDATE

我似乎有這個代碼的結果：

$(function() { 

var width = 1260, 
    height = 1000; 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var projection = d3.geo.mercator() 
    .center([-73.98, 40.70]) 
    .scale(237000) 
    .translate([width/2, height/2]); 

var features = svg.append('g') 
      .attr('class', 'features'); 
var path = d3.geo.path() 
     .projection(projection); 

var zoom = d3.behavior.zoom() 
     .scaleExtent([1, Infinity]) 
     .on('zoom', zoomed); 

d3.json('bk-gll1-topojson.json', function(error, bk) { 
    console.log(bk); 
var featureCollection = topojson.feature(bk, bk.objects['bk-gll1']); 
var bounds = d3.geo.bounds(featureCollection); 
console.log(featureCollection.features[0]); 

features.selectAll('path') 
    .data(featureCollection.features.slice(0, 241000)) 
    .enter() 
    .append('path') 
    .attr('d', path) 
}); 
function zoomed() { 
console.log('zooming'); 
features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")") 
    .selectAll("path").style("stroke-width", 1/zoom.scale() + "px"  ); 
}; 
});

不過，我只能夠呈現關於featuresCollection數組中的元素67萬的三分之一。有關如何在不崩潰瀏覽器的情況下加載整個數據集的任何建議？可能嗎？

更新2

因此，它似乎是負載的數據逐步幫助...還有很長的加載時間，然而，可能不適合生產環境是可行的：

features.selectAll('path') 
    .data(featureCollection.features.slice(0, 241500))//after this number of elements point, map renders as giant black square 
    .enter() 
    .append('path') 
    .attr('d', path) 
    .on('click', clicked); 
features.selectAll('path') 
    .data(featureCollection.features.slice(241500, 246500)) 
    .enter() 
    .append('path') 
    .attr('d', path) 
    .on('clicked', clicked);

來源

2015-05-24 Robert Cunningham

你嘗試渲染到畫布而不是SVG？這仍然是很多元素，可能仍然很慢，但至少你不會重載DOM。

來源

2016-01-15 08:52:45

D3.js布魯克林TopoJSON地圖不渲染

回答

相關問題