D3条形图+网格线=鼠标悬停不起作用

Question

我创建了一个带有鼠标悬停事件的d3条形图，以显示该特定矩形中的总数：

带有网格线的组是我在svg中创建的第一个元素：

  let svg = d3.select('#graph')
    .append('svg')
    .attr('width', svgW)
    .attr('height', svgH);
  let xGridLines = d3.axisBottom(x)
    .tickSize(-height, 0, 0)
    .tickFormat('');
  svg.append('g')
    .attr('class', 'grid')
    .attr('transform', `translate(${margins.left},${height + margins.top * 0.90})`)
    .call(xGridLines);

如果我想将网格移动到图形的前面（我在图表创建后移动网格线的创建），问题就开始了。然后鼠标停止工作。

我试图搜索解决方案，但找不到任何教程（我也是d3的新手）。

有人知道如何解决吗？这是我的完整代码：

  let svg = d3.select('#graph')
    .append('svg')
    .attr('width', svgW)
    .attr('height', svgH);
  let xGridLines = d3.axisBottom(x)
    .tickSize(-height, 0, 0)
    .tickFormat('');
  svg.append('g')
    .attr('class', 'grid')
    .attr('transform', `translate(${margins.left},${height + margins.top * 0.90})`)
    .call(xGridLines);
  let chart = svg.append('g')
    .classed('display', true)
    .attr('transform', `translate(${margins.left},${margins.top})`);

  let series = chart.append('g')
    .attr('class', 'series');

  // Add labeled rects for each birthyear (so that no enter or exit is required).
  let serie = series.selectAll('.serie')
    .data(d3.range(0, objData.data.length))
    .enter().append('g')
    .attr('class', 'serie');

  let xAxis = d3.axisTop(x);

  chart.append('g')
    .classed('x axis', true)
    .attr('transform', 'translate(0,0)')
    .call(xAxis);

  let tooltip = d3.select('#graph').append('div')
    .attr('class', 'indicators-graph__tooltip')
    .style('opacity', 0);

  let tooltipContainer = d3.select('.indicators-graph__tooltip').append('div')
    .attr('class', 'indicators-graph__tooltip__container');

  serie.selectAll('rect')
    .data((index) => {
      return [objData.data[index], objData.data[index]];
    })
    .enter()
    .append('rect')
    .attr('x', (d, i) => {
      if (i === 0) {
        return 0;
      } else {
        return d.first > 0 ? x(d.first) + 5 : 0;
      }
    })
    .attr('y', function (d, i) {
      return y(d.key);
    })
    .attr('class', (d, i) => {
      if (i === 0) {
        return 'indicators-graph__container__canvas__first-group';
      } else {
        return 'indicators-graph__container__canvas__second-group';
      }
    })
    .attr('width', (d, i) => {
      if (i === 0) {
        return x(d.first);
      } else {
        return d.first > 0 ? x(d.second) : x(d.second);
      }
    })
    .attr('height', function (d, i) {
      return lineHeight;
    })
    .text((d) => d.key)
    .on('mouseover', (d, i) => {
      let xAxis;
      let yAxis;
      let value;

      if (i === 0) {
        xAxis = (x(d.first) / 2) - 30;
        yAxis = y(d.key) + 15;
        value = d.first;
      } else {
        xAxis = x(d.first) + x(d.second / 2) - 30;
        yAxis = y(d.key) + 15;
        value = d.second;
      }

      tooltip.transition()
        .duration(200)
        .style('opacity', 0.9);

      tooltipContainer.html(value);

      tooltip.style('left', xAxis + 'px')
        .style('top', yAxis + 'px');
    })
    .on('mouseout', function (d) {
      tooltip.transition()
        .duration(200)
        .style('opacity', 0);
    });