Upgrade D3 to v6 (#1310)

* Update packages

* Updates

* Update changeset

Author: Methuselah96

.changeset/spicy-olives-compete.md

@@ -3,7 +3,7 @@
 ---
 
 - Remove UMD build.
-- Upgrade d3 peer dependency from v3 to v5.
+- Upgrade d3 peer dependency from v3 to v6.
 - Remove `attr` configuration method.
 - Rename `style` configuration method to `styles` and move to options.
 - Move `text` configuration method to options.

packages/d3-state-visualizer/package.json

@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@types/d3": "^5.16.4",
-    "d3": "^5.16.0",
+    "@types/d3": "^6.7.5",
+    "d3": "^6.7.0",
     "d3tooltip": "^2.1.0",
     "deepmerge": "^4.2.2",
     "map2tree": "^2.1.0",

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -186,8 +186,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     .call(zoom.scaleTo, initialZoom)
     .call(
-      zoom.on('zoom', () => {
-        const { transform } = d3.event as D3ZoomEvent<SVGSVGElement, unknown>;
+      zoom.on('zoom', (event) => {
+        const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
         vis.attr('transform', transform.toString());
       })
     )
@@ -369,8 +369,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
         .append('circle')
         .attr('class', 'nodeCircle')
         .attr('r', 0)
-        .on('click', (clickedNode) => {
-          if (d3.event.defaultPrevented) return;
+        .on('click', (event, clickedNode) => {
+          if ((event as Event).defaultPrevented) return;
           toggleChildren(clickedNode.data);
           update();
         });
@@ -383,7 +383,9 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
         .attr('dy', '.35em')
         .style('fill-opacity', 0)
         .text((d) => d.data.name)
-        .on('click', onClickText);
+        .on('click', (_, datum) => {
+          onClickText(datum);
+        });
 
       const nodeEnterAndUpdate = nodeEnter.merge(node);
 

packages/d3tooltip/package.json

@@ -44,17 +44,17 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/d3": "^5.16.4",
+    "@types/d3": "^6.7.5",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
-    "d3": "^5.16.0",
+    "d3": "^6.7.0",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@types/d3": "^5.16.4",
-    "d3": "^5.16.0"
+    "@types/d3": "^6.7.5",
+    "d3": "^6.7.0"
   }
 }

packages/d3tooltip/src/index.ts

@@ -1,11 +1,11 @@
 import * as d3 from 'd3';
-import type { BaseType, ContainerElement, Selection } from 'd3';
+import type { BaseType, Selection } from 'd3';
 
 export type StyleValue = string | number | boolean;
 
 interface Options<
   Datum,
-  RootGElement extends ContainerElement,
+  RootGElement extends BaseType,
   RootDatum,
   RootPElement extends BaseType,
   RootPDatum
@@ -23,13 +23,7 @@ interface Options<
   text: string | ((datum: Datum) => string);
 }
 
-const defaultOptions: Options<
-  unknown,
-  ContainerElement,
-  unknown,
-  BaseType,
-  unknown
-> = {
+const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
@@ -43,7 +37,7 @@ export function tooltip<
   Datum,
   PElement extends BaseType,
   PDatum,
-  RootGElement extends ContainerElement,
+  RootGElement extends BaseType,
   RootDatum,
   RootPElement extends BaseType,
   RootPDatum
@@ -68,9 +62,12 @@ export function tooltip<
   const rootNode = anchor.node()!;
 
   return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
-    selection.on('mouseover.tip', (node) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+    selection.on('mouseover.tip', (event, datum) => {
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
       anchor.selectAll(`div.${className}`).remove();
 
@@ -81,20 +78,23 @@ export function tooltip<
         .style('z-index', 1001)
         .style('left', `${x}px`)
         .style('top', `${y}px`)
-        .html(typeof text === 'function' ? () => text(node) : () => text);
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
 
       for (const [key, value] of Object.entries(styles)) {
         el.style(key, value);
       }
     });
 
-    selection.on('mousemove.tip', (node) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+    selection.on('mousemove.tip', (event, datum) => {
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
       el.style('left', `${x}px`)
         .style('top', `${y}px`)
-        .html(typeof text === 'function' ? () => text(node) : () => text);
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
     });
 
     selection.on('mouseout.tip', () => el.remove());