在画笔上方显示数据点 [英] 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]]);
      })
    }
  });

派生示例- http://jsfiddle.net/81mzjkjz/37/

推荐答案

默认dc.js将笔刷层放在所有其他对象的前面，这样它将拦截所有单击。如果您可以将鼠标悬停在圆点上，也可以单击它们，这意味着如果您不小心在圆点上开始刷牙，就不会发生刷牙。

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.

小提琴的叉子（谢谢！）： http://jsfiddle.net/gordonwoodhull/sajwjv7n/3/

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

这篇关于在画笔上方显示数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！