Migrate to D3 v7

README.md

@@ -7,8 +7,8 @@ Live demo is available at https://moisseev.github.io/rspamd-D3Pie/demo/
 
 In your page, include the `D3` and `jQuery` libraries. These can be placed anywhere:
 ```html
-<script src="https://d3js.org/d3.v5.min.js"></script>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 ```
 
 ## Installing

d3pie.js

@@ -235,7 +235,7 @@ function D3Pie (id, options) {
 
         const sliceGEnter = sliceG.enter().append("g")
             .attr("class", "slice-g")
-            .on("mouseover", function (d) {
+            .on("mouseover", function (_, d) {
                 const tot = tooltip.datum().total;
                 const percentage = (tot) ? Math.round(100 * d.data.value / tot) : NaN;
                 if (d.data.value) {
@@ -253,8 +253,8 @@ function D3Pie (id, options) {
             .on("mouseout", function () {
                 tooltip.transition().duration(300).style("opacity", 0);
             })
-            .on("mousemove", function () {
-                const {pageX, pageY} = d3.event;
+            .on("mousemove", (event) => {
+                const {pageX, pageY} = event;
                 tooltip
                     .style("left", (pageX) + "px")
                     .style("top", function (d) { return (pageY - d.height - 2) + "px"; });

demo/index.html

@@ -8,8 +8,8 @@
     <link rel="stylesheet" type="text/css" href="../d3pie.css" />
     <link rel="stylesheet" type="text/css" href="demo.css" />
 
-    <script src="https://d3js.org/d3.v5.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
     <script src="lib/visibility.min.js"></script>
     <script src="../d3pie.js"></script>
 </head>