Ignat Varlamov Ignat Varlamov - 4 days ago 7
Javascript Question

DC.JS scatterplot chart selection

enter image description here

Hi, I am using dc.js.

I can not understand how can I get data for building the tooltip shown in the screenshot.

How do I get the selected items in the event handler brush.on ( 'brushend.foo', function () {}) ?

This is my handler to draw the tooltip:

var brush = this.chart.brush();
brush.on('brushend.foo', function() {
let selection = self.chart.select('.extent');


let tooltipValues = {
maxProbability: '-',
minProbability: '-',
minImpact: '-',
maxImpact: '-',
}
selection.on('mousemove', function(){
selection.on
div.transition()
.duration(200)
.style("opacity", 1);

div.html(
`
<div> Probability (percents) max: ${tooltipValues.maxProbability} <div>
<div> Probability (percents) min: ${tooltipValues.minProbability} <div>
<div> Impact max: ${tooltipValues.maxImpact} <div>
<div> Impact min ${tooltipValues.minImpact} <div>
`
)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px")
.style("class", "content")

})
.on("mouseout", function(d) {
div.transition()
.duration(300)
.style("opacity", 0);
});
});

Answer

Rather than trying to use the dots in the chart, I'd use the crossfilter objects to retrieve the data. (The model in our MVC is crossfilter, after all.)

So you can use self.chart.dimension().top(Infinity) to get all the raw rows of data which are currently filtered in. Note that dimension.top works differently from group.all in that it does observe its own filters. That's what you want here.

If you'd rather work with reduced (grouped) data, you'd have to create a separate dimension & group just to observe all the filters.

The important thing to notice here is that the selection is not particular to the brush or chart. Since the scatter plot already observes any filters on other charts, and you're interested in the brush on the scatter plot, the result is the same as the fully filtered set of rows in the crossfilter instance.

Comments