-->

显示数据点上刷的顶部(Display data point on top of brush)

2019-09-29 04:02发布

我有由条形图和散点图的复合图。 我想虽然刷牙能够显示散点图数据点。

在目前的行为,涂刷覆盖数据点提示。 任何帮助满足这一要求吗?

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/



文章来源: Display data point on top of brush
标签: dc.js