d3-hexbin центры возвращают только 3 очка

Question

У меня есть этот код

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3'), require('d3-hexbin'), require('leaflet')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3', 'd3-hexbin', 'leaflet'], factory) :
(factory((global.leafletD3 = {}),global.d3,global.d3.hexbin));}(this, (function (exports,d3,d3Hexbin) { 'use strict';
var d3_hexbin = (null != d3.hexbin)? d3.hexbin : (null != d3Hexbin)? d3Hexbin.hexbin : null;

L.HexbinLayer = L.SVG.extend({

/**
 * Opcje domyślne
 */
options : {
    radius : 12,
    opacity: 0.6,
    duration: 200,
    color: 'pink',
    pointerEvents: 'all'
},


/**
 * Leaflet inicjalizacja funkcji
 */
initialize : function(options) {
    L.setOptions(this, options);

    this._fn = {
        lng: function(d) { return d[0]; },
        lat: function(d) { return d[1]; },
        MeasureValue: function(d) { return d[2]; },
        fill: function(d) { return d; }
    };

    // OnClick obiektu
    this._dispatch = d3.dispatch('click');

    // Tworzenie siatki hexagonów
    var GridGen = d3_hexbin();
    var x = GridGen.centers();

    for (let i=0; i<x.length; i++) {
        console.log(x[i]);
    }

    this._hexLayout = GridGen
        .radius(this.options.radius)
        .x(function(d) { return d.point[0]; })
        .y(function(d) { return d.point[1]; });

    // Inicjalizacja danych
    this._data = [];

},

/**
 * Przerysowanie gdy warstwa jest dodana
 */
onAdd : function(map) {

    L.SVG.prototype.onAdd.call(this);

    // Store a reference to the map for later use
    this._map = map;

    // Redraw on moveend
    map.on({ 'moveend': this.redraw }, this);

    // Initial draw
    this.redraw();

},

/**
 * Usuwanie warstwy
 */
onRemove : function(map) {

    L.SVG.prototype.onRemove.call(this);

    // Destroy the svg container
    this._destroyContainer();

    // Remove events
    map.off({ 'moveend': this.redraw }, this);

    this._map = null;

},

/**
 * Tworzenie SVG kontenera hexagonów
 */
_initContainer : function() {

    L.SVG.prototype._initContainer.call(this);
    this._d3Container = d3.select(this._container).select('g');
},

/**
 * Czyszczenie SVG
 */
_destroyContainer: function() {},

/**
 * Przerysowanie SVG
 */
redraw : function() {
    var that = this;

    if (!that._map) {
        return;
    }

    var zoom = map.getZoom();
    var output_zoom =   document.getElementById("zoom");
    output_zoom.innerHTML = zoom;

    // Generate the mapped version of the data
    var data = that._data.map(function(d) {
        var lng = that._fn.lng(d);
        var lat = that._fn.lat(d);
        var MeasureValue = that._fn.MeasureValue(d);

        var ColorFillValue;

        if(MeasureValue == -1){
            ColorFillValue = that.options.color;
        }else if(MeasureValue >= 0 & MeasureValue < 25){
            ColorFillValue = '#6bc926';
        }else if (MeasureValue >= 26 & MeasureValue < 50){
            ColorFillValue = '#d1cf1e';
        }else if (MeasureValue >= 51 & MeasureValue < 90){
            ColorFillValue = '#efbb0f';
        }else if (MeasureValue >= 91 & MeasureValue < 180){
            ColorFillValue = '#ef7120';
        }else if (MeasureValue >= 181){
            ColorFillValue = '#ef2a36';
        }

        var point = that._project([ lng, lat ]);

        return {
            o: d, 
            point: point,
            ColorFill: ColorFillValue
        };

    });

    // Select the hex group for the current zoom level. This has
    // the effect of recreating the group if the zoom level has changed
    var join = this._d3Container.selectAll('g.hexbin')
        .data([ this._map.getZoom() ], function(d) { return d; });

    // enter
    var enter = join.enter().append('g')
        .attr('class', function(d) { return 'hexbin zoom-' + d; });

    // enter + update
    var enterUpdate = enter.merge(join);

    // exit
    join.exit().remove();

    // add the hexagons to the select
    this._createHexagons(enterUpdate, data);

},

_createHexagons : function(g, data) {
    var that = this;

    var color = 'red';

    var r = that.options.radius;

    // Tworzenie binów
    var bounds = that._map.getBounds();

    // Łączenie hexagonów z punktami 
    var bins = that._hexLayout(data);
        bins = bins.filter(function(d) { return bounds.contains(that._map.layerPointToLatLng(L.point(d.x, d.y))); });

    var join = g.selectAll('g.hexbin-container').data(bins, function(d) { return d.x + ':' + d.y; });
        join.select('path.hexbin-hexagon').transition().duration(that.options.duration)
            .attr('fill', color)
            .attr('fill-opacity', that.options.opacity)
            .attr('stroke-opacity', that.options.opacity)
            .attr('d', function(d) { return that._hexLayout.hexagon(r); });


    var enter = join.enter().append('g').attr('class', 'hexbin-container');
        enter.append('path').attr('class', 'hexbin-hexagon')
            .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
            .attr('d', function(d) { return that._hexLayout.hexagon(r); })
            .attr('fill', color)
            .attr('fill-opacity', 0.01)
            .attr('stroke-opacity', 0.01)
            .transition().duration(that.options.duration)
                .attr('fill-opacity', that.options.opacity)
                .attr('stroke-opacity', that.options.opacity)
                .attr('d', function(d) { return that._hexLayout.hexagon(that.options.radius); });

    // Grid
        enter.append('path').attr('class', 'hexbin-grid')
            .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
            .attr('d', function(d) { return that._hexLayout.hexagon(r); })
            .attr('fill', 'none')
            .attr('stroke', 'none')
            .style('pointer-events', that.options.pointerEvents)
            .on('click', function(d, i) { that._dispatch.call('click', this, d, i); });


    // Exit
    var exit = join.exit();
        exit.select('path.hexbin-hexagon')
            .transition().duration(that.options.duration)
            .attr('fill-opacity', 0)
            .attr('stroke-opacity', 0)
            .attr('d', function(d) { return that._hexLayout.hexagon(0); });
        exit.transition().duration(that.options.duration)
            .remove();

},

_project : function(coord) {
    var point = this._map.latLngToLayerPoint([ coord[1], coord[0] ]);

    return [ point.x, point.y ];
},











// ------------------------------------
// Public API
// ------------------------------------

radius: function(v) {
    if (!arguments.length) { return this.options.radius; }

    this.options.radius = v;
    this._hexLayout.radius(v);

    return this;
},

opacity: function(v) {
    if (!arguments.length) { return this.options.opacity; }
    this.options.opacity = v;

    return this;
},

duration: function(v) {
    if (!arguments.length) { return this.options.duration; }
    this.options.duration = v;

    return this;
},

lng: function(v) {
    if (!arguments.length) { return this._fn.lng; }
    this._fn.lng = v;

    return this;
},

lat: function(v) {
    if (!arguments.length) { return this._fn.lat; }
    this._fn.lat = v;

    return this;
},

fill: function(v) {
    if (!arguments.length) { return this._fn.fill; }
    this._fn.fill = v;

    return this;
},

data: function(v) {
    if (!arguments.length) { return this._data; }
    this._data = (null != v) ? v : [];

    this.redraw();

    return this;
},

dispatch: function() {
    return this._dispatch;
},

CoordsGrid: function() {
    return GridGen.centers();
}

});

L.hexbinLayer = function(options) {
     return new L.HexbinLayer(options);
};

Object.defineProperty(exports, '__esModule', { value: true });

})));

А также

    /**
 * Tworzenie mapy
 */
var center = [51.654910, 17.806621];

var osmUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://mapbox.com">Mapbox</a>',
    osm = L.tileLayer(osmUrl, {maxZoom: 14, minZoom: 3, attribution: osmAttrib, id: 'mapbox.streets', accessToken: '', style: 'mapbox://styles/mapbox/streets-v10'});

map = new L.Map('map', {layers: [osm], center: new L.LatLng(center[0], center[1]), zoom: 4}).fitWorld();

var southWest = L.latLng(-89.98155760646617, -180),
    northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);

map.setMaxBounds(bounds);
map.on('drag', function() {
    map.panInsideBounds(bounds, { animate: false });
});

/**
 * Pobieranie danych z serwera
 */

$.ajax({
    url:'http://',
    complete: function (response) {
        var data_table = [];
        var Data = [];
        var DataString = response.responseText;

        Data = JSON.parse(DataString);
        for (let i=0; i<Data.length; i++) {
            var lng = Data[i].lng;
            var lat = Data[i].lat;
            var pm10 = Data[i].pm10_0;
            data_table[i] = [lng, lat, pm10];
        }

        var options = {
            radius : 10
        };

        var hexLayer = L.hexbinLayer(options).addTo(map)

        hexLayer.data(data_table);

        hexLayer.dispatch().on('click', function(d, i) {
            var koordynaty = map.layerPointToLatLng(L.point(d.x, d.y));
            alert(koordynaty.lat + " | " + koordynaty.lng);
            var marker = L.marker([ koordynaty.lat, koordynaty.lng ]).addTo(map);
        });

    },
    error: function () {
        alert("Blad pobierania danych");
    },
});

/**
 * Obsługa menu
 */
$(document).ready(function(){
    $("#header-menu").click(function(){
        $("#options-menu-draw").toggle();
    });
});

function hidden_menu_draw() {
    document.getElementById("options-menu-draw").style.display = "none";
}

var date = new Date();
var hour = date.getHours();

document.getElementById("hour").value = hour;


var slider = document.getElementById("hour");
var output_slider = document.getElementById("value_hour");
output_slider.innerHTML = slider.value;

slider.oninput = function() {
    output_slider.innerHTML = this.value;
}

/**
 * Blokada prawego przycisku myszy
 */
//$(function() {
//  $(this).bind("contextmenu", function(e) {
//      e.preventDefault();
//  });
//});

/**
 * Ustawienie mapy na dane koordynaty
 */
map.setView([51.9255004, 20.2982543], 3);


/**
 * Pokazanie welcome modal
 */
//$('#welcome_modal').modal('show');

У меня проблема с плагином d3-hexbin. Когда я хочу получить все точки центров шестиугольника, функция.centers() возвращает только 3 пункта

Array [ 0, 0 ]
Array [ 1.7320508075688772, 0 ]
Array [ 0.8660254037844386, 1.5 ]

Что я делаю не так? Другая проблема, когда я увеличиваю и уменьшаю карты, положение шестиугольников меняется. Как я могу это изменить? Все, что я показываю в Open Street Maps в Leaflet lib.