布魯克林的D3.js TopoJSON地圖未呈現

Question

我正在嘗試使用D3.js繪制布魯克林建築物和地段的地圖。 為了完成此任務，我做了以下工作：

1. 從MapPLUTO獲取shapefile：

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

2. 使用以下ogr2ogr命令將shapefile轉換為GeoJSON：

ogr2ogr -f GeoJSON -lco COORDINATE_PRECISION = 4-選擇'geometry，BBL'-s_srs EPSG：2263 -t_srs EPSG：4326 bk-gll1.json BKMapPLUTO.shp

3. 使用以下命令將GeoJSON轉換為TopoJSON：topojson -o bkgll1-topojson.json bk-gll1.json

我嘗試了不同的投影，比例和數據綁定，但是我只設法渲染了填充SVG視口的黑色正方形，或者什么也沒有。

TopoJSON和GeoJSON文件位於此處： https : //github.com/RobertPTC/nyc_maps 。 還包括通過mapshaper.org呈現的TopoJSON的屏幕截圖。

$(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超級粉絲，如果有人可以幫助解決這個問題，我將非常感激！

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數組中渲染670000個元素中的三分之一。 關於如何加載整個數據集而不會使瀏覽器崩潰的任何建議？ 可能嗎？

更新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);

Answer 1

您是否嘗試過渲染到畫布而不是SVG？ 那仍然是很多元素，並且可能仍然很慢，但是至少您不會過載DOM。