fix: d3v6 removal of d3.event

examples/annotation-canvas-band/index.js

@@ -37,7 +37,7 @@ d3.select(container)
         horizontalBand(data);
         verticalBand(data);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-canvas-crosshair/index.js

@@ -32,12 +32,12 @@ d3.select(container)
     .on('draw', () => {
         crosshair(data);
     })
-    .on('mousemove', () => {
+    .on('mousemove', event => {
         const { clientX, clientY } = event;
         data[0] = { x: clientX, y: clientY };
         container.requestRedraw();
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-canvas-gridline/index.js

@@ -13,7 +13,7 @@ d3.select(container)
     .on('draw', () => {
         gridline();
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-canvas-line/index.js

@@ -28,7 +28,7 @@ d3.select(container)
         horizontalLine([0.15, 0.85]);
         verticalLine([0.2, 0.4, 0.6, 0.8]);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-gridline-transition/index.js

@@ -47,7 +47,7 @@ d3.select(container)
 
         svg.call(gridline);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-svg-band/index.js

@@ -42,7 +42,7 @@ d3.select(container)
         svg.append('g').call(horizontalBand);
         svg.append('g').call(verticalBand);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-svg-crosshair/index.js

@@ -32,12 +32,12 @@ d3.select(container)
     .on('draw', () => {
         svg.datum(data).call(crosshair);
     })
-    .on('mousemove', () => {
+    .on('mousemove', event => {
         const { clientX, clientY } = event;
         data[0] = { x: clientX, y: clientY };
         container.requestRedraw();
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-svg-gridline/index.js

@@ -23,7 +23,7 @@ d3.select(container)
     .on('draw', () => {
         svg.call(gridline);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/annotation-svg-line/index.js

@@ -36,7 +36,7 @@ d3.select(container)
             .datum([0.2, 0.4, 0.6, 0.8])
             .call(verticalLine);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width, height } = event.detail;
         xScale.range([10, width - 30]);
         yScale.range([5, height - 20]);

examples/axis-annotation/index.js

@@ -49,7 +49,7 @@ d3.select(container)
             .select('svg')
             .call(axis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([0, width]);
     });

examples/axis-band-scale/index.js

@@ -23,7 +23,7 @@ d3.select(container)
             .attr('transform', 'translate(0, 50)')
             .call(fc.axisBottom(scale));
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([0, width]);
     });

examples/axis-center/index.js

@@ -19,7 +19,7 @@ d3.select(bandContainer)
             .select('svg')
             .call(bandAxis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         bandScale.range([0, width]);
     });

examples/axis-color/index.js

@@ -18,7 +18,7 @@ d3.select(container)
             .select('svg')
             .call(axis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([margin, width - margin]);
     });

examples/axis-label-offset/index.js

@@ -29,7 +29,7 @@ const renderAxis = (axisFactory, selector) => {
                 .select('svg')
                 .call(axis);
         })
-        .on('measure', () => {
+        .on('measure', event => {
             const { width, height } = event.detail;
             scale.range([
                 0,

examples/axis-offset/index.js

@@ -26,7 +26,7 @@ d3.select(container)
             .select('svg')
             .call(axis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([margin, width - margin]);
     });

examples/axis-rotate-auto/index.js

@@ -21,7 +21,7 @@ const renderAxis = (axisFactory, selector) => {
                 .select('svg')
                 .call(axis);
         })
-        .on('measure', () => {
+        .on('measure', event => {
             const { width, height } = event.detail;
             const side = container.getAttribute('class');
 

examples/axis-rotate-decorate/index.js

@@ -29,7 +29,7 @@ d3.select(container)
             .attr('transform', 'translate(0, 10)')
             .call(axis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([margin, width - 40 - margin]);
     });

examples/axis-tick-arguments/index.js

@@ -47,7 +47,7 @@ d3.select(container)
             .attr('transform', 'translate(0, 170)')
             .call(fc.axisBottom(scale).tickFormat(d3.format(',.0f')));
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         scale.range([0, width]);
     });

examples/axis-transition/index.js

@@ -56,7 +56,7 @@ d3.select(container)
             )
         ).call(fcOrdinalAxis);
     })
-    .on('measure', () => {
+    .on('measure', event => {
         const { width } = event.detail;
         linearScale.range([0, width]);
         ordinalScale.range([0, width]);

examples/chart-cartesian-move-axis/index.js

@@ -35,9 +35,9 @@ chart.decorate(selection => {
         // move it into the plot-area
         .style('grid-row', 3)
         // listen for the draw event (using a namespace to avoid removing any existing handlers)
-        .on('draw.move-axis', (d, i, nodes) => {
+        .on('draw.move-axis', (event, d) => {
             // select the x-axis
-            d3.select(nodes[i])
+            d3.select(event.currentTarget)
                 // apply a top margin to the axis to align it to 0 on the y-axis
                 .style('margin-top', `${yScale(0)}px`);
         });

examples/chart-cartesian-second-axis/index.js

@@ -43,13 +43,13 @@ chart.decorate(selection => {
         // and give the axis a width
         .style('width', '3em')
         // when there's a measure event (namespaced to avoid removing existing handlers)
-        .on('measure.z-axis', () => {
+        .on('measure.z-axis', event => {
             // set the range on the scale to the elements height
-            zScale.range([d3.event.detail.height, 0]);
+            zScale.range([event.detail.height, 0]);
         })
-        .on('draw.z-axis', (d, i, nodes) => {
+        .on('draw.z-axis', (event, d) => {
             // draw the axis into the svg within the d3fc-svg element
-            d3.select(nodes[i])
+            d3.select(event.currentTarget)
                 .select('svg')
                 .call(zAxis);
         });

examples/chart-zoom/index.js

@@ -20,10 +20,10 @@ const area = fc
     .size(4);
 
 // create a d3-zoom that handles the mouse / touch interactions
-const zoom = d3.zoom().on('zoom', function() {
+const zoom = d3.zoom().on('zoom', (event) => {
     // update the scale used by the chart to use the updated domain
-    x.domain(d3.event.transform.rescaleX(x2).domain());
-    y.domain(d3.event.transform.rescaleY(y2).domain());
+    x.domain(event.transform.rescaleX(x2).domain());
+    y.domain(event.transform.rescaleY(y2).domain());
     render();
 });
 
@@ -36,9 +36,9 @@ const chart = fc
         // add the zoom interaction on the enter selection
         sel.enter()
             .select('.plot-area')
-            .on('measure.range', () => {
-                x2.range([0, d3.event.detail.width]);
-                y2.range([d3.event.detail.height, 0]);
+            .on('measure.range', event => {
+                x2.range([0, event.detail.width]);
+                y2.range([event.detail.height, 0]);
             })
             .call(zoom);
     });

examples/diamonds/index.js

@@ -10,9 +10,9 @@ d3.tsv('diamond-data.tsv', d => ({
     const yScale = d3.scaleLog().domain(yExtent(data));
     const yScaleCopy = yScale.copy();
 
-    const zoom = d3.zoom().on('zoom', () => {
-        xScale.domain(d3.event.transform.rescaleX(xScaleCopy).domain());
-        yScale.domain(d3.event.transform.rescaleY(yScaleCopy).domain());
+    const zoom = d3.zoom().on('zoom', event => {
+        xScale.domain(event.transform.rescaleX(xScaleCopy).domain());
+        yScale.domain(event.transform.rescaleY(yScaleCopy).domain());
         render();
     });
 
@@ -67,9 +67,9 @@ d3.tsv('diamond-data.tsv', d => ({
                 .enter()
                 .select('.webgl-plot-area')
                 .raise()
-                .on('measure.range', () => {
-                    xScaleCopy.range([0, d3.event.detail.width]);
-                    yScaleCopy.range([d3.event.detail.height, 0]);
+                .on('measure.range', event => {
+                    xScaleCopy.range([0, event.detail.width]);
+                    yScaleCopy.range([event.detail.height, 0]);
                 })
                 .call(zoom);
         });

examples/earth-and-mars/index.js

@@ -50,8 +50,8 @@ worker.onmessage = e => {
 
     const multiSeries = fc.seriesWebglMulti().series([areaSeries, lineSeries]);
 
-    const zoom = d3.zoom().on('zoom', () => {
-        xScale.domain(d3.event.transform.rescaleX(xScaleCopy).domain());
+    const zoom = d3.zoom().on('zoom', event => {
+        xScale.domain(event.transform.rescaleX(xScaleCopy).domain());
         render();
     });
 
@@ -65,8 +65,8 @@ worker.onmessage = e => {
         .decorate(selection => {
             selection
                 .select('.plot-area')
-                .on('measure.range', () => {
-                    xScaleCopy.range([0, d3.event.detail.width]);
+                .on('measure.range', event => {
+                    xScaleCopy.range([0, event.detail.width]);
                 })
                 .call(zoom);
         });

examples/element-bespoke-chart-layout/index.js

@@ -7,62 +7,62 @@ const xScale = d3.scaleLinear();
 const yScale = d3.scaleLinear();
 
 d3.select('#x-axis-top')
-    .on('measure', (d, i, nodes) => {
-        const { width, height } = d3.event.detail;
-        d3.select(nodes[i])
+    .on('measure', (event, d) => {
+        const { width, height } = event.detail;
+        d3.select(event.currentTarget)
             .select('svg')
             .attr('viewBox', `0 ${-height} ${width} ${height}`);
     })
-    .on('draw', (d, i, nodes) => {
+    .on('draw', (event, d) => {
         const xAxis = d3.axisTop(xScale);
-        d3.select(nodes[i])
+        d3.select(event.currentTarget)
             .select('svg')
             .call(xAxis);
     });
 
-d3.select('#x-axis-bottom').on('draw', (d, i, nodes) => {
+d3.select('#x-axis-bottom').on('draw', (event, d) => {
     const xAxis = d3.axisBottom(xScale);
-    d3.select(nodes[i])
+    d3.select(event.currentTarget)
         .select('svg')
         .call(xAxis);
 });
 
 d3.select('#y-axis-left')
-    .on('measure', (d, i, nodes) => {
-        const { width, height } = d3.event.detail;
-        d3.select(nodes[i])
+    .on('measure', (event, d) => {
+        const { width, height } = event.detail;
+        d3.select(event.currentTarget)
             .select('svg')
             .attr('viewBox', `${-width} 0 ${width} ${height}`);
     })
-    .on('draw', (d, i, nodes) => {
+    .on('draw', (event, d) => {
         const yAxis = d3.axisLeft(yScale);
-        d3.select(nodes[i])
+        d3.select(event.currentTarget)
             .select('svg')
             .call(yAxis);
     });
 
-d3.select('#y-axis-right').on('draw', (d, i, nodes) => {
+d3.select('#y-axis-right').on('draw', (event, d) => {
     const yAxis = d3.axisRight(yScale);
-    d3.select(nodes[i])
+    d3.select(event.currentTarget)
         .select('svg')
         .call(yAxis);
 });
 
 d3.select('#plot-area')
     .datum([])
-    .on('measure', () => {
+    .on('measure', event => {
         // Use measure event to ensure scales have their range updated before
         // any of the elements (including the axes) are drawn.
-        const { width, height } = d3.event.detail;
+        const { width, height } = event.detail;
         xScale.range([0, width]);
         yScale.range([height, 0]);
     })
-    .on('draw', (d, i, nodes) => {
+    .on('draw', (event, d) => {
         const lineSeries = fc
             .seriesSvgLine()
             .xScale(xScale)
             .yScale(yScale);
-        d3.select(nodes[i])
+        d3.select(event.currentTarget)
             .select('svg')
             .datum(data)
             .call(lineSeries);

examples/label-layout/index.js

@@ -136,8 +136,8 @@ d3.select('#strategy-selector').on('change', () => {
     );
 });
 
-d3.select('#apply-strategy').on('click', () => {
-    d3.event.preventDefault();
+d3.select('#apply-strategy').on('click', event => {
+    event.preventDefault();
     const strategyName = getStrategyName();
     strategy = d => d;
     if (strategyName !== 'none') {
@@ -159,8 +159,8 @@ d3.select('#apply-strategy').on('click', () => {
     render();
 });
 
-d3.select('#generate-data').on('click', () => {
-    d3.event.preventDefault();
+d3.select('#generate-data').on('click', event => {
+    event.preventDefault();
     generateData();
     render();
 });