d3.js: Get data out of synchronous brush selection

Question

In my project i got multiple dynamically (in this example three) rendered charts.

The synchronous selection over multiple charts when you make a selection in one chart is one of the key features.

Is there a possibility to get the selected data out of all 3 selections after you made a selection in one chart? In best case it should console.log() three different arrays with the different selected data points.

I added an working example in jsfiddle .

I already tried to console.log(event) in the .on("end", ...) of the selectBrush but it only gives me back the selection event of one chart.

Here is the whole selectBrush code:

 var selectBrush = d3
  .brushX()
  .extent([
    [0, 0],
    [width, height],
  ])
  .on("brush", selectBrushed)
  .on("end", function (event) {
    if (event.selection == null) {
      resetSelection();
    }
  });

Thank you

Answer 1

You have 2 options here:

1. Return the selected domain of the x scale after each brush event. Cache the data globally for all 3 charts and filter each for the selected domain range and output it.

2. Extract the data from the __data__ property of the line element after each brush event and return it. Just console log the d3 selection for the line element and look into the _groups property tree. You will find the __data__ property.