Switch instantiation syntax to conventional class new

README.md

@@ -31,10 +31,8 @@ or using a *script* tag
 ```
 then
 ```js
-const myChart = Sunburst();
-myChart
-  .data(<myData>)
-  (<myDOMElement>);
+const myChart = new Sunburst(<myDOMElement>);
+  .data(<myData>);
 ```
 
 ## API reference

example/basic/index.html

@@ -38,11 +38,10 @@
       }]
     };
 
-    Sunburst()
+    new Sunburst(document.getElementById('chart'))
       .data(data)
       .size('size')
       .color('color')
-      .radiusScaleExponent(1)
-      (document.getElementById('chart'));
+      .radiusScaleExponent(1);
   </script>
 </body>

example/flare/index.html

@@ -13,13 +13,12 @@
     const color = d3.scaleOrdinal(d3.schemePaired);
 
     fetch('flare.json').then(res => res.json()).then(data => {
-      Sunburst()
+      new Sunburst(document.getElementById('chart'))
         .data(data)
         .label('name')
         .size('size')
         .color((d, parent) => color(parent ? parent.data.name : null))
-        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
-        (document.getElementById('chart'));
+        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`);
     });
   </script>
 </body>

example/large-data/index.html

@@ -31,14 +31,13 @@
 
     const color = d3.scaleOrdinal(d3.schemePaired);
 
-    Sunburst()
+    new Sunburst(document.getElementById('chart'))
       .data(genNode())
       .color(d => color(d.name))
       .minSliceAngle(.4)
       .excludeRoot(true)
       .maxLevels(6)
       .showLabels(false)
-      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
-    (document.getElementById('chart'));
+      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`);
   </script>
 </body>

example/sort-by-size/index.html

@@ -31,13 +31,12 @@
 
     const color = d3.scaleOrdinal(d3.schemePaired);
 
-    Sunburst()
+    new Sunburst(document.getElementById('chart'))
       .data(genNode())
       .sort((a, b) => b.value - a.value) // sort descending by size
       .color(d => color(d.name))
       .minSliceAngle(.4)
       .showLabels(false)
-      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
-    (document.getElementById('chart'));
+      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`);
   </script>
 </body>

example/truncate-labels/index.html

@@ -13,7 +13,7 @@
     const color = d3.scaleOrdinal(d3.schemePaired);
 
     fetch('flare.json').then(res => res.json()).then(data => {
-      Sunburst()
+      new Sunburst(document.getElementById('chart'))
         .data(data)
         .label('name')
         .size('size')
@@ -24,8 +24,7 @@
           return numFitChars < 5
             ? null
             : `${label.slice(0, Math.round(numFitChars) - 3)}...`;
-        })
-        (document.getElementById('chart'));
+        });
     });
   </script>
 </body>

package.json

@@ -52,21 +52,21 @@
     "d3-shape": "1 - 3",
     "d3-transition": "2 - 3",
     "float-tooltip": "1",
-    "kapsule": "1"
+    "kapsule": "^1.16"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "rollup": "^4.22.5",
+    "rollup": "^4.28.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   },
   "engines": {
     "node": ">=12"

src/index.d.ts

@@ -32,69 +32,65 @@ type TooltipFn = (node: Node, dataNode: DataNode) => string;
 
 type NonFittingLabelFn = (label: string, availablePx: number, node: DataNode) => string | null | undefined | false;
 
-export interface SunburstChartGenericInstance<ChainableInstance> {
-  (element: HTMLElement): ChainableInstance;
+declare class SunburstChart {
+  constructor(element: HTMLElement, configOptions?: ConfigOptions);
 
   width(): number;
-  width(width: number): ChainableInstance;
+  width(width: number): SunburstChart;
   height(): number;
-  height(height: number): ChainableInstance;
+  height(height: number): SunburstChart;
 
   data(): Node;
-  data(rootNode: Node): ChainableInstance;
+  data(rootNode: Node): SunburstChart;
   children(): NodeAccessor<Node[]>;
-  children(childrenAccessor: NodeAccessor<Node[]>): ChainableInstance;
+  children(childrenAccessor: NodeAccessor<Node[]>): SunburstChart;
   label(): NodeAccessor<string>;
-  label(textAccessor: NodeAccessor<string>): ChainableInstance;
+  label(textAccessor: NodeAccessor<string>): SunburstChart;
   size(): NodeAccessor<string>;
-  size(sizeAccessor: NodeAccessor<string>): ChainableInstance;
+  size(sizeAccessor: NodeAccessor<string>): SunburstChart;
   color(): NodeAccessor<string>;
-  color(colorAccessor: NodeAccessor<string>): ChainableInstance;
+  color(colorAccessor: NodeAccessor<string>): SunburstChart;
   strokeColor(): NodeAccessor<string>;
-  strokeColor(colorAccessor: NodeAccessor<string>): ChainableInstance;
+  strokeColor(colorAccessor: NodeAccessor<string>): SunburstChart;
   nodeClassName(): NodeAccessor<string>;
-  nodeClassName(nodeAccessor: NodeAccessor<string>): ChainableInstance;
+  nodeClassName(nodeAccessor: NodeAccessor<string>): SunburstChart;
 
   minSliceAngle(): number;
-  minSliceAngle(degrees: number): ChainableInstance;
+  minSliceAngle(degrees: number): SunburstChart;
   maxLevels(): number;
-  maxLevels(degrees: number): ChainableInstance;
+  maxLevels(degrees: number): SunburstChart;
   excludeRoot(): boolean;
-  excludeRoot(exclude: boolean): ChainableInstance;
+  excludeRoot(exclude: boolean): SunburstChart;
   centerRadius(): number;
-  centerRadius(radiusRatio: number): ChainableInstance;
+  centerRadius(radiusRatio: number): SunburstChart;
   radiusScaleExponent(): number;
-  radiusScaleExponent(exponent: number): ChainableInstance;
+  radiusScaleExponent(exponent: number): SunburstChart;
 
   sort(): CompareFn<Node> | null;
-  sort(cmpFn: CompareFn<Node> | null): ChainableInstance;
+  sort(cmpFn: CompareFn<Node> | null): SunburstChart;
 
   showLabels(): boolean;
-  showLabels(show: boolean): ChainableInstance;
+  showLabels(show: boolean): SunburstChart;
   labelOrientation(): Orientation;
-  labelOrientation(orientation: Orientation): ChainableInstance;
+  labelOrientation(orientation: Orientation): SunburstChart;
   handleNonFittingLabel(): NonFittingLabelFn | null;
-  handleNonFittingLabel(handleFn: NonFittingLabelFn | null): ChainableInstance;
+  handleNonFittingLabel(handleFn: NonFittingLabelFn | null): SunburstChart;
   showTooltip(): (node: Node) => boolean;
-  showTooltip(showTooltipFn: (node: Node) => boolean): ChainableInstance;
+  showTooltip(showTooltipFn: (node: Node) => boolean): SunburstChart;
   tooltipTitle(): TooltipFn;
-  tooltipTitle(fn: TooltipFn): ChainableInstance;
+  tooltipTitle(fn: TooltipFn): SunburstChart;
   tooltipContent(): TooltipFn;
-  tooltipContent(fn: TooltipFn): ChainableInstance;
+  tooltipContent(fn: TooltipFn): SunburstChart;
 
-  onClick(cb: ((node: Node, event: MouseEvent) => void) | null): ChainableInstance;
-  onRightClick(cb: ((node: Node, event: MouseEvent) => void) | null): ChainableInstance;
-  onHover(cb: ((node: Node | null, event: MouseEvent) => void) | null): ChainableInstance;
+  onClick(cb: ((node: Node, event: MouseEvent) => void) | null): SunburstChart;
+  onRightClick(cb: ((node: Node, event: MouseEvent) => void) | null): SunburstChart;
+  onHover(cb: ((node: Node | null, event: MouseEvent) => void) | null): SunburstChart;
 
   focusOnNode(): Node | null;
-  focusOnNode(node: Node | null): ChainableInstance;
+  focusOnNode(node: Node | null): SunburstChart;
 
   transitionDuration(): number;
-  transitionDuration(duration: number): ChainableInstance;
+  transitionDuration(duration: number): SunburstChart;
 }
 
-export type SunburstChartInstance = SunburstChartGenericInstance<SunburstChartInstance>;
-
-declare function SunburstChart(configOptions?: ConfigOptions): SunburstChartInstance;
-
 export default SunburstChart;