LineChart2-mouse.js

  componentDidMount() {
    // use d3's events so we get to use the handy d3.mouse function to get x,y in svg coords
    const handleMouseMove = this._handleMouseMove;
    d3.select(React.findDOMNode(this.refs.svg)).on('mousemove', function mouseMoveHandler() {
      handleMouseMove(d3.mouse(this));
    }).on('mouseleave', function mouseOutHandler() {
      handleMouseMove([null, null]);
    });
  },

  componentDidUnmount() {
    // unbind d3 mouse listeners
    d3.select(React.findDOMNode(this.refs.svg)).on('mousemove', null).on('mouseleave', null);
  },

  _handleMouseMove([mouseX, mouseY]) {
    // find nearest data point
    const { data, xKey } = this.props;
    const { x, y } = this._chartComponents();

    // convert the mouse x and y to the domain x and y using our chart scale
    let domainX = x.invert(mouseX);
    let domainY = y.invert(mouseY);

    // if the mouse is outside the domain, consider it having exited
    if (domainX < x.domain()[0] || domainX > x.domain()[1]) {
      domainX = null;
    }
    if (domainY < y.domain()[0] || domainY > y.domain()[1]) {
      domainY = null;
    }

    // send an action indicating which point to highlight if we are near one, otherwise indicate
    // no point should be highlighted.
    if (domainX !== null && domainY !== null && mouseX != null && mouseY != null) {
      // find the nearest point to the x value
      const point = Util.findClosest(data, domainX, (d) => d[xKey]);

      ChartActions.highlight(point);
    } else {
      ChartActions.highlight();
    }
  },