如何将crossfilter数据中的circleMarker坐标和半径值分配给传单?

时间:2019-07-14 20:45:01

标签: leaflet dc.js crossfilter

我想在传单地图上显示标记,其半径将根据我的行图表中每个元素的值而变化。

作为javascript的初学者,我测试了几种解决方案,但均无效果。

这会向我显示标记的位置,但在同一位置的标记数与所需值的数量一样,而不是每个位置和该值的半径的1个标记。

var q = queue()
        .defer(d3.csv, "prod.csv")
        .defer(d3.csv, "bro.csv");

        q.await(function(error, prodata, brodata) {

    function join(lookupTable, mainTable, lookupKey, mainKey, select) {
    var l = lookupTable.length,
    m = mainTable.length,
    lookupIndex = [],
    output = [];
    for (var i = 0; i < l; i++) { 
    var row = lookupTable[i];
    lookupIndex[row[lookupKey]] = row;
}
    for (var j = 0; j < m; j++) { 
    var y = mainTable[j];
    var x = lookupIndex[y[mainKey]]; 
    output.push(select(y, x)); 
}
    return output;
};

    var data = join(brodata, prodata, "BRO", "BRO", function(bro, geo) {
    return {
            hbro: bro.BRO,
            DateR : bro.DateR,
            week: bro.Week,
            lat: geo.lat,
            lon: geo.long};

});
    broChart = dc.rowChart("#brograph");
    weekChart = dc.barChart("#weekgraph"),
    var ndx = crossfilter(data);
    var all = ndx.groupAll();
    var allDim = ndx.dimension(function(d) {return d;});

    var broDim = ndx.dimension(function (d) { return d['hbro']; });
    var broGroup = broDim.group();
    var weekDim = ndx.dimension(function (d) { return d['Week']; });
    var weekGroup = weekDim.group();

    var dateDim = ndx.dimension(function (d) { return d['DateR']; });
    var dateGroup = dateDim.group();

    minDate = weekDim.bottom(1)[0]["Week"];
    maxDate = weekDim.top(1)[0]["Week"];

    weekChart
            .width(400)
            .dimension(weekDim)
            .group(weekGroup)
            .x(d3.scale.linear().domain([minDate, maxDate]))
            .xAxis().ticks(maxDate);
    broChart
            .width(400)
            .dimension(broDim)
            .group(broGroup)
            .elasticX(true);

    var map = L.map('mymap');

    var drawMap = function(){

    map.setView([43.7580261, 4.6074231], 12);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 15,
        }).addTo(map);

    };
    var result = broGroup.top(Infinity);

    allDim.top(Infinity).forEach(function (d, result) {
    var marker = new L.circleMarker([d.lat, d.lon]);
    marker.bindPopup(d.hbro);
    marker.setRadius(Math.sqrt(d.????? * 0.00010));
    marker.addTo(map);

    });

    drawMap();

    dc.renderAll();

    });

0 个答案:

没有答案