绑定dc.js谷歌地图与crossfilter

问：要点之中，可以使用dc.js +谷歌地图可以看到，当我一个dc.js图上刷任何人提供的玩具例如，地图的标记更新根据图表中选择/刷新的内容？绑定dc.js谷歌地图与crossfilter

我到目前为止：pages.github。完整的回购是here。我也发现这个很酷的的例子，但它使用传单。我尽可能避免传单。

我想将dc.js（crossfilter）绑定到Google地图。我已经看到这video，我能够适应这个例子。

但是，当我尝试将其改编为使用dc.js时，我无法将crossfilter绑定回Google地图。（我仍然可以将地图绑定到crossfilter/dc.js，而不是相反）。也就是说，当在地图上滚动时，图表会调整，但当我刷图时，似乎无法让我的updateMarkers()函数触发。

function init() { 
    initMap(); 
    initCrossFilter(); 

    // bind map bounds to lat/lng ndx dimensions 
    latDim = ndx.dimension(function(p) { return p.lat; }); 
    lngDim = ndx.dimension(function(p) { return p.lng; }); 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = this.getBounds(); 
    var northEast = bounds.getNorthEast(); 
    var southWest = bounds.getSouthWest(); 

    // NOTE: need to be careful with the dateline here 
    lngDim.filterRange([southWest.lng(), northEast.lng()]); 
    latDim.filterRange([southWest.lat(), northEast.lat()]); 

    // NOTE: may want to debounce here, perhaps on requestAnimationFrame 
    dc.renderAll(); 
    }); 

    // dimension and group for looking up currently selected markers 
    idDim = ndx.dimension(function(p, i) { return i; }); 
    idGroup = idDim.group(function(id) { return id; }); 

    renderAll(); 
} 

function updateMarkers() { 
    var pointIds = idGroup.all(); 
    for (var i = 0; i < pointIds.length; i++) { 
    var pointId = pointIds[i]; 
    markers[pointId.key].setVisible(pointId.value > 0); 
    } 
} 

function renderAll() { 
    updateMarkers(); 
    dc.renderAll(); 
}

来源

2014-10-17 JasonAizkalns

好主意。你能制作一个jsfiddle或类似的，让我们看看你到目前为止有什么？请注意，开发中还有[dc.leaflet.js]（https://github.com/yurukov/dc.leaflet.js）。 – Gordon 2014-10-18 04:17:07

我发布了我的：[pages.github]（http://jaysunice3401.github.io/dc.js-with-Google-Maps/）。完整的回购是[这里]（https://github.com/jaysunice3401/dc.js-with-Google-Maps/tree/master）。我还发现这个很酷的[点心仪表盘]（http://jeroenooms.github.io/dashboard/snack/）的例子，但是这个使用了小册子。我尽可能避免传单。 – JasonAizkalns 2014-10-20 19:27:10

看起来你错过了从dc.js回到谷歌地图的回调。在原始示例中，他们使用的是

domCharts = d3.selectAll(".chart") 
     .data(charts) 
     .each(function(chart) { chart.on("brush", renderAll).on("brushend", renderAll); });

可能会或可能不会与dc.js一起使用。

尽管还有其他方法可以实现，但将非dc.js图表附加到一组dc.js图表的最常用方法是将其注册到图表注册表中。

不幸的是，这是没有记录的，但看看这个SO回答，以及添加到它的有用评论，了解如何注册您的Google地图，以便在刷新时听到来自其他图表的呈现事件：

dc.js - Listening for chart group render

来源

2014-10-23 21:01:14 Gordon

尝试获取根元素与chart.root（），然后装上监听器：

domCharts = d3.selectAll(".chart") 
    .data(charts) 
    .each(function(chart) { 
    chart.root().on(event, updateMarkers) 
});

虽然我还没有意识到，如果这种做法是最优或导致任何副作用EFFE CTS。

来源

2014-11-07 10:21:22 Viktor

绑定dc.js谷歌地图与crossfilter

回答

相关问题