不能将鼠标悬停在 path.area 后面的点上

Question

如标题所述，我们无法将鼠标悬停在 path.area 后面的点上。
情况如下

如果我们将鼠标悬停在蓝线和黄线上，我们可以获得工具提示，但如果我们将鼠标悬停在红线上，我们只能从第一个点和最后一个点获得工具提示。
代码如下：

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();

我们尝试使用以下语句提高所有圆点：

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

但是没有用。有什么建议吗？

Answer 1

我不确定在综合图表中使用 renderArea 是否是个好主意；如您所见，颜色混在一起变成了棕色，并且不太清楚它应该传达什么。

我认为 renderArea 使用堆叠图表效果更好，其中每种颜色覆盖的区域都有意义。

也就是说，解决您遇到的问题非常容易。

提高点数不起作用的原因是因为复合图表的每个子项都在其自己的图层中。因此，提高点数只会使它们位于该图表的顶部（它们已经位于该位置）。

相反，您可以为填充区域禁用鼠标交互：

  path.area {
    pointer-events: none;
  }

由于填充区域之前没有交互，这应该不会损失太多，但您可能想要更保守一些，并使用选择器 #composite-chart path.area[=14= 将规则限制在特定图表上]

不能将鼠标悬停在 path.area 后面的点上

Cannot hover over points that are behind path.area

d3.js

crossfilter

dc.js