Question

我想知道一种将小册子聚类可视化与dc js图表绑定的方法。我有一个非常不完整的代码，我找到了一种使用crossfilter js对数据进行分组的方法。我可以使用带有分组的dc js制作一个饼图。但是要用传单绑定它我没有明确的方法。我调查了https://github.com/yurukov/dc.leaflet.js

但是我有一个实时可视化，它使用设置间隔方法以定期的时间间隔获取数据。因此dc.leaflet.js在这种情况下不起作用，因为每次添加新图层。到目前为止，我的代码如下。有人可以分享一下如何做到这一点吗？

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Markercluster</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

<!-- Example data. -->


<div id='map'></div>

<script>

(function() {
L.mapbox.accessToken = 'pk.eyJ1IjoieWVkdXJhZyIsImEiOiJuTkZSOE9vIn0.RE94btqnc1LqnFzzEPZoHg';
    var map = L.mapbox.map('map', 'yedurag.km329i82')
        .setView([15, -15], 2);

    var markers = new L.MarkerClusterGroup();

function foo() {
 d3.json("SB1.json", function(addressPoints) {

    var data = crossfilter(addressPoints); 

    var group1 = data.dimension(function (d) {
            return d[2]; // State is a column in the data
        });
    var statsBygroup1 = group1.group().reduce(
                function (p, v) {
                    ++p.count
                    p.lat.push(parseFloat(v[0]))
                    p.longi.push(parseFloat(v[1]))
                    ;


                    return p;
                }, // to calculate the stats by industries, var industries is grouped and raised is added 
                function (p, v) {
                    --p.count
                    p.lat.pop()
                    p.longi.pop()
                    ;
                    return p; // when unclicked it is subtracted
                },
                function () {
                    return {count: 0, lat: [], longi: []} // initial state; although not mentioned as ReduceInitial
                }
        )


    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
            title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers); })

    }

var interval = setInterval(function(){foo()}, 10000); // Listens for the json from python every 10 seconds
})();
</script>
</body>
</html>

如何使用dc js和crossfilter制作交互式传单聚类地图？

0 个答案: