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); 
  } 
});

我还没有考虑是否有可能让点击通过点而徘徊在他们身上。我的猜测是，这很难做对。

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

在画笔顶部显示数据点

1 个答案: