Display data point on top of brush

问题

I have a composite chart comprised of a bar chart and scatter plot. I would like to display the scatter plot data points although brushing is enabled.

In the current behaviour, the brushing overrides the data point tooltip. Any help to fulfill this requirement please?

scatterChart
  .width(380)
  .height(200)
  .margins({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
  })
  .dimension(scatterDimension)
  .group(scatterGrouping)
  .x(d3.scale.linear().domain([0., 100.]))
  .y(d3.scale.linear().domain([0., 100.]))
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .symbolSize(5)
  .highlightedSize(8)
  //.brushOn(false)
  .existenceAccessor(function(d) {
    return d.value > 0;
  })
  .colorAccessor(function(d) {
    return d.key[2];
  })
  .colors(fruitColors)
  .filterHandler(function(dim, filters) {  
  // https://jsfiddle.net/gordonwoodhull/c593ehh7/5/
    if (!filters || !filters.length)
      dim.filter(null);
    else {
      // assume it's one RangedTwoDimensionalFilter
      dim.filterFunction(function(d) {
        return filters[0].isFiltered([d[0], d[1]]);
      })
    }
  });

Forked Example - http://jsfiddle.net/81mzjkjz/37/

回答1:

By default dc.js puts the brush layer in front of everything else so that it will intercept all clicks. If you are able to hover over the dots, you'll also be able to click on them, and this means that if you accidentally start brushing while over a dot, brushing won't happen.

But if you're willing to take that risk, you can move the brush to the back of its siblings like this:

scatterChart.on('pretransition', function(chart) {
  var brushNode = chart.select('g.brush').node();
  var firstChild = brushNode.parentNode.firstChild; 
  if (firstChild) { 
    brushNode.parentNode.insertBefore(brushNode, firstChild); 
  } 
});

I haven't looked into whether it's possible to let clicks go through the dots while hovers stay on them. My guess is that this would be hard to get right.

Fork of your fiddle (thank you!): http://jsfiddle.net/gordonwoodhull/sajwjv7n/3/

来源：https://stackoverflow.com/questions/42251090/display-data-point-on-top-of-brush

标签

dc.js