使用交叉过滤器将 dc.js 绑定到 Google 地图答案

【问题标题】：Binding dc.js to Google Maps with crossfilter使用交叉过滤器将 dc.js 绑定到 Google 地图
【发布时间】：2014-12-13 12:46:54
【问题描述】：

问题： 要点是，谁能提供一个使用 dc.js + google maps 的玩具示例，当我在 dc.js 图表上刷时，地图的标记会根据图表中选择/刷过的内容进行更新？

到目前为止我所拥有的：pages.github。完整的回购是here。我还发现了这个很酷的snack dashboard 示例，但这使用了传单。我尽量避免传单。

我正在尝试将 dc.js（交叉过滤器）绑定到 Google 地图。我已经看到了这个 video 并且我能够调整这个例子。

但是，当我尝试调整它以使用 dc.js 时，我无法将交叉过滤器绑定回 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();
}

【问题讨论】：

好主意。你能制作一个 jsfiddle 或类似的东西，让我们看看你到目前为止有什么吗？请注意，还有 dc.leaflet.js 正在开发中。
我发布了我所拥有的内容：pages.github。完整的回购是here。我还发现了这个很酷的snack dashboard 示例，但这使用了传单。如果可能的话，我试图避免传单。

标签： javascript google-maps d3.js dc.js crossfilter

【解决方案1】：

您似乎错过了从 dc.js 返回到 Google 地图的回调。在原始示例中，他们使用

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

这可能适用于 dc.js，也可能不适用于 dc.js。

虽然还有其他方法可以做到这一点，但将非 dc.js 图表附加到一组 dc.js 图表的最惯用方法是将其注册到图表注册表中。

不幸的是，这是未记录的，但请查看此 SO 答案以及添加到其中的有用 cmets，以了解如何注册您的 Google 地图以在其他图表被刷出时听到来自其他图表的渲染事件：

dc.js - Listening for chart group render

【讨论】：

【解决方案2】：

尝试使用 chart.root() 获取根元素，然后附加监听器：

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

虽然我还不知道这种方法是否最佳或会导致任何副作用。

【讨论】：