Javascript D3.js布鲁克林地图未渲染

我正在尝试使用D3.js渲染布鲁克林建筑和地段的地图。为了完成这项任务，我做了以下工作：

从MapPLUTO获得的形状文件：

使用以下ogr2ogr命令将shapefile转换为GeoJSON：

ogr2ogr-f GeoJSON-lco坐标精度=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文件位于以下位置：。还包括通过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超级粉丝，如果有人能帮我解决这个问题，我将不胜感激

更新

我似乎有以下代码的结果：

$(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);

---

您是否尝试过渲染到画布而不是SVG？这仍然有很多元素，可能仍然很慢，但至少不会使DOM过载