在这个例子中不清楚dc.js事件是如何工作的

Question

我正在尝试创建类似于此的内容：http://photogrammar.yale.edu/labs/crossfilter/california/但我不清楚点击某个县如何更新dataTablesm。我的版本是使用传单地图，在d3中为标记创建圆圈。我想拥有它，以便在单击圆圈时，dataTablesm仅显示与该位置相关联的项目。这是我的plnk。在photogrammar示例中，我没有看到任何对点击，更新或渲染的引用。

  var feature = g.selectAll("circle")
 .data(stateCountGroup.all())
 .enter().append("circle")
 .style("stroke", "black")
 .style("opacity", .6)
 .style("fill", "red")
 .attr("r", function(d) {
   //console.log(d.value);
   return d.value*5; })
 //.on("click", click)
 .on("mouseover", function(d) {
     div.transition()
         .duration(200)
         .style("opacity", .9);
     div.html(d.value + " Items")
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
     })
 .on("mouseout", function(d) {
     div.transition()
         .duration(500)
         .style("opacity", 0);
 });


dataTablesm
.dimension(yearDimension)
.group(function(d) { return ""
 })
 .size(100)
 .columns([
   function(d) { return '<a target="_blank"  href="https://arc.lib.montana.edu  /ivan-doig/item.php?id=' + d.Item+ '"><img src="https://arc.lib.montana.edu/ivan-doig/' + d.Thumb + '" /></a><div class="byline">' + d.Title +  '</div>'; },
 ]);

 map.on("viewreset", update);
 update();

 function update() {
     feature.attr("transform", function(d){
       //console.log(d.key);
       var coor = map.latLngToLayerPoint(d.key);
       return "translate(" +
           coor.x + "," +
           coor.y + ")";
     });
   }

  //});
  // register handlers
  //d3.selectAll('a#all').on('click', function () {
    //dc.filterAll();
    //dc.renderAll();
  //});
  dc.renderAll();
  //dc.redrawAll();