Question

正如标题所述，我们无法将鼠标悬停在路径.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

将规则限制为特定的图表

无法将鼠标悬停在path.area之后的点上

1 个答案: