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地图不渲染

回答

相关问题