在画笔顶部显示数据点

Question

我有一个由条形图和散点图组成的复合图表。尽管启用了刷亮，但我想显示散点图数据点。

在当前行为中，刷亮覆盖了数据点工具提示。请问有什么帮助可以满足这个要求吗？

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/

Answer 1

默认情况下 dc.js 将画笔层放在其他所有内容的前面，以便拦截所有点击。如果你可以将鼠标悬停在点上，你也可以点击它们，这意味着如果你不小心在点上开始刷牙，刷牙不会发生。

但如果你愿意冒这个风险，你可以像这样将刷子移到它的兄弟姐妹的后面：

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

我没有研究是否可以让点击通过点，而鼠标悬停在点上。我的猜测是这很难做到正确。

你的 fiddle 分支（谢谢！）：http://jsfiddle.net/gordonwoodhull/sajwjv7n/3/

在画笔顶部显示数据点

Display data point on top of brush

dc.js