@visx/event

Installation

npm install --save @visx/event

Usage

@visx/event exports a utility localPoint that takes an SVG MouseEvent or TouchEvent as input and returns a { x: number; y: number; } point coordinate (or null in the case the event has no ownerSVGElement) within the coordinate system of the SVG. This makes placement of tooltips, finding nearby datum, etc. easier.

Example:

import { localPoint } from '@visx/event';

<svg>
  <SomeElement
    {...}
    onMouseMove={(event: MouseEvent) => {
      const point = localPoint(event) || { x: 0, y: 0 };
      // use coordinates ...
    }}
  />
  {...}
</svg>

You may optionally pass a reference to the SVG node

import { useRef } from 'react';
import { localPoint } from '@visx/event';

const svgRef = useRef<SVGSVGElement>(null);

<svg ref={svgRef}>
  <SomeElement
    {...}
    onMouseMove={(event: MouseEvent) => {
      const point = localPoint(svgRef.current, event) || { x: 0, y: 0 };
      // use coordinates ...
    }}
  />
  {...}
</svg>