綁定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

回答

相關問題