使用CrossFilter将dc.js绑定到Google Maps

Question

问题： 要点是，任何人都可以使用dc.js +谷歌地图提供一个玩具示例，当我在dc.js图表​​上进行笔刷时，地图的标记会根据图表中选择/绘制的内容进行更新？

到目前为止，我所拥有的：pages.github。完整的仓库在这里。我还找到了这个很酷的小吃仪表板示例，但这使用了传单。如果可能的话，我试图避免传单。

我正在尝试将dc.js（交叉过滤器）绑定到Google Maps。我看过这个视频，我能够适应这个例子。

但是，当我尝试使其适应使用dc.js时，无法将交叉滤镜绑定回Google Maps。（我仍然可以将地图绑定到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();
}

Answer 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 答案，以及添加到其中的有用注释，以了解如何注册您的 Google 地图以在刷其他图表时听到来自其他图表的渲染事件：

dc.js - 监听图表组渲染