javascript - 使用交叉过滤器将 dc.js 绑定(bind)到 Google map

Question

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

我目前拥有的:pages.github .完整的 repo 是here .我也觉得这个很酷snack dashboard例如，但这使用传单。如果可能的话，我试图避免传单。

我正在尝试将 dc.js(交叉过滤器)绑定(bind)到 Google map 。我看过这个video我能够适应这个例子。

但是，当我尝试调整它以使用 dc.js我无法将交叉过滤器绑定(bind)回 Google map 。 (我仍然可以将 map 绑定(bind)到 crossfilter/dc.js，但不能反过来)。也就是说，在 map 上滚动时，图表会调整，但是当我刷图表时，我似乎无法得到我的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 map 的回调。在原始示例中，他们使用

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 map 以在其他图表被刷出时听到来自其他图表的渲染事件:

dc.js - Listening for chart group render