2017-02-15 104 views
1

我有一个由条形图和散点图组成的复合图表。尽管启用了刷牙功能,但我想显示散点图数据点。在画笔顶部显示数据点

在当前行为中,刷牙将覆盖数据点工具提示。任何帮助来满足这一要求?

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/

回答

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/

+0

它的伟大工程,感谢戈登 – user3559365