代码之家  ›  专栏  ›  技术社区  ›  Tinwor

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

  •  1
  • Tinwor  · 技术社区  · 6 年前


    情况如下 enter image description here


    代码如下:

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

    但没用。有什么建议吗?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Gordon    6 年前

    我不确定这是个好主意 renderArea

    我想 使用堆叠图表时效果更好,其中每种颜色所覆盖的区域都意味着某种东西。

    也就是说,很容易解决你看到的问题。

    相反,您可以禁用填充区域的鼠标交互:

      path.area {
        pointer-events: none;
      }
    

    由于填充区域以前不是交互式的,所以这不会损失太多,但是您可能希望更加保守,并使用选择器将规则限制在特定的图表上 #composite-chart path.area