Destroy all resources when using destroy method

dist/js/funnel-graph.js

@@ -5907,11 +5907,28 @@ var destroySVG = exports.destroySVG = function destroySVG(_ref14) {
   return function () {
     var svg = getRootSvg(context.getId());
     if (svg) {
+      // destroy tooltip
+      var tooltipElement = (0, _d3Selection.select)("#d3-funnel-js-tooltip");
+      if (tooltipElement) {
+        tooltipElement.remove();
+      }
+
+      // destroy all in specific path listeners
+      var paths = rootSvg.selectAll('path');
+      if (paths) {
+        paths.on('.all', null);
+      }
+
       // Stop any ongoing transitions
       svg.selectAll('*').interrupt();
 
+      // remove all other listeners
+      svg.selectAll('*').on('.all', null);
+
       // Remove all SVG elements
       svg.selectAll('*').remove();
+
+      // remove the svg itself
       svg.remove();
     }
   };

examples/example-details.html

@@ -0,0 +1,20 @@
+<a href="example.html">Back</a>
+
+<h1>
+    Drill Down Page
+</h1>
+<p>You click on area: <span id="indexParam"></span> </p>
+
+
+<script>
+
+    function getQueryParams() {
+        const params = new URLSearchParams(window.location.search);
+        const index = params.get('index');
+        return { index };
+    }
+
+    const params = getQueryParams();
+    document.getElementById('indexParam').textContent = `Index: ${params.index}`;
+
+</script>

examples/example.html

@@ -176,6 +176,7 @@
             callbacks: {
                 click: (event, metadata) => {
                     console.log("click handler", metadata);
+                    window.location.href = `example-details.html?index=${metadata.index}`;
                 },
                 // adding a tooltip handler instead of the ootb tooltip display
                 // tooltip: (event, metadata) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-funnel-graph",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "SVG Funnel Graph Javascript Library",
   "main": "dist/js/funnel-graph.min.js",
   "style": "dist/funnel-graph.min.css",
@@ -26,7 +26,8 @@
     "funnel-chart",
     "funnel-graph",
     "svg-funnel-chart",
-    "svg-funnel-graph"
+    "svg-funnel-graph",
+    "d3-funnel-graph"
   ],
   "browserslist": [
     "last 2 versions"

src/js/d3.js

@@ -703,11 +703,29 @@ const destroySVG = ({ context }) => () => {
     const svg = getRootSvg(context.getId());
 
     if (svg) {
+
+        // destroy tooltip
+        const tooltipElement = select("#d3-funnel-js-tooltip");
+        if (tooltipElement) {
+            tooltipElement.remove();
+        }
+
+        // destroy all in specific path listeners
+        const paths = rootSvg.selectAll('path');
+        if (paths) {
+            paths.on('.all', null);
+        }
+
         // Stop any ongoing transitions
         svg.selectAll('*').interrupt();
 
+        // remove all other listeners
+        svg.selectAll('*').on('.all', null);
+
         // Remove all SVG elements
         svg.selectAll('*').remove();
+
+        // remove the svg itself
         svg.remove();
     }
 }