Search code examples
d3.jsdc.jscrossfilter

Cannot hover over points that are behind path.area

As the title mention we are not able to hover over point thats are behind a path.area.
The situation is the following enter image description here

If we hover the blue and the yellow line we are able to get the tooltip but if we hover over the red line we get the tooltip only from the first and the last point.
The code is the following: 

let nix = crossfilter();
timeseriesFiltered.forEach(ts => {
          ndx.add(ts.values.map(function(d) {
            let temp = JSON.parse(JSON.stringify(objTemplate));
            temp[ts.place] = d.value;
            temp.date = new Date(d.timestamp);
            return temp;
          }));
        });
        let dimDate = ndx.dimension(dc.pluck('date'));
        let lineChartGroups = [];
        timeseriesFiltered.forEach((ts, index) => {
          let group = dimDate.group().reduceSum(dc.pluck(ts.place));
          let lineChart =  dc.lineChart(composite)
            .dimension(dimDate)
            .renderDataPoints(true)
            .renderArea(true)
            .defined(d => {
              return d.y != 0;
            })
            .colors(this.colors[index])
            .group(group, this.setName(ts.place));
          lineChartGroups.push(lineChart);
        })
        let chart = composite
          .width(width)
          .height(300)
          .margins({top: 30, right: 60, bottom: 30, left: 60})
          .x(d3.scaleTime().domain([new Date(minDate), new Date(maxDate)]))
          .yAxisLabel(timeseriesFiltered[0].unit)
          .elasticY(true)
          .mouseZoomable(true)
          .brushOn(false)
          .clipPadding(10)
          .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
          ._rangeBandPadding(1)
          .compose(lineChartGroups);
          chart.render();

We have tried to raise all the circle dot by using the following statement: 

d3.selectAll('circle.dot').raise();

But it didn't work. Any suggestion?

Solution

  • I'm not sure that it's a great idea to use renderArea in a composite chart; as you can see, the colors get muddied together into brown, and it's not really clear what it's supposed to convey.

    I think renderArea works better with a stacked chart, where the area that is covered by each color means something.

    That said, it's pretty easy to fix the problem you are seeing.

    The reason why raising the dots doesn't work is because each child of the composite chart is in its own layer. So raising the dots only puts them at the top of that chart (where they already are).

    Instead, you can disable mouse interactions for the filled areas:

      path.area {
    pointer-events: none;
  }

    Since the filled areas weren't interactive before, this shouldn't lose much, but you might want to be more conservative and restrict the rule to the particular chart with the selector #composite-chart path.area