d3 zoom

zoom.tsx

interface GraphNode {
  id: string | number;
  type: DrawerTypes;
  scale: number;
  hover: boolean;
  active: boolean;
  neighbors: (D3GraphNode | GraphEdge)[];
}

interface D3GraphNode extends d3.SimulationNodeDatum, GraphNode {
}

const focus = (container: HTMLDivElement, d: D3GraphNode) => {
  const root = d3.select(`.${styles.root}`);
  const bbox = (d3.select(`[data-id="${d.id}"]`).node() as SVGGraphicsElement).getBBox();
  const t0 = d3.zoomTransform(root.node() as any);
  const x = Math.round(container.offsetWidth / 2) / t0.k - (d.x! - Math.round(bbox.width / 2));
  const y = Math.round(container.offsetHeight / 2) / t0.k - (d.y! - Math.round(bbox.height / 2));
  const t1 = d3.zoomIdentity.scale(t0.k).translate(x, y);
  root.call(zoom.duration(1000).transform, t1);
};