From 96e7de390b734656264e060452c5ad89663f6b94 Mon Sep 17 00:00:00 2001
From: johnwalley <john@walley.org.uk>
Date: Sun, 4 Oct 2020 12:26:51 +0100
Subject: [PATCH] feat: explicitly support d3 v6

Includes docs and examples
---
 README.md                | 12 ++++-----
 example/d3-v5.html       | 58 ++++++++++++++++++++++++++++++++++++++++
 example/index.html       |  6 ++---
 example/london-tube.html |  6 ++---
 example/minimal.html     |  2 +-
 example/popover.html     |  8 +++---
 package-lock.json        | 44 +++++++++++++++---------------
 package.json             |  4 +--
 8 files changed, 99 insertions(+), 41 deletions(-)
 create mode 100644 example/d3-v5.html
diff --git a/README.md b/README.md
index 30cede2..3654d7c 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global
 is exported:
 
 ```html
-<script src="https://d3js.org/d3.v5.js"></script>
+<script src="https://d3js.org/d3.v6.js"></script>
 <script src="../dist/d3-tube-map.js"></script>
 
 <script>
@@ -50,31 +50,31 @@ is exported:
 ## API Reference
 
 <a name="tubeMap" href="#tubeMap">#</a> d3.<b>tubeMap</b>()
-[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js 'Source')
+[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#7 'Source')
 
 Constructs a new tube map generator with the default settings.
 
 <a name="_tubeMap" href="#_tubeMap">#</a> <i>tubeMap</i>(<i>selection</i>)
-[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L26 'Source')
+[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L22 'Source')
 
 Render the tube map to the given _selection_, which is a
 [selection](https://github.com/d3/d3-selection).
 
 <a name="tubeMap_width" href="#tubeMap_width">#</a>
 <i>tubeMap</i>.<b>width</b>(<i>w</i>)
-[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L109 'Source')
+[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L101 'Source')
 
 Sets the width of the viewbox the map is rendered to.
 
 <a name="tubeMap_height" href="#tubeMap_height">#</a>
 <i>tubeMap</i>.<b>height</b>(<i>h</i>)
-[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L115 'Source')
+[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L107 'Source')
 
 Sets the height of the viewbox the map is rendered to.
 
 <a name="tubeMap_margin" href="#tubeMap_margin">#</a>
 <i>tubeMap</i>.<b>margin</b>(<i>m</i>)
-[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L121 'Source')
+[<>](https://github.com/johnwalley/d3-tube-map/blob/master/src/map.js#L113 'Source')
 
 Sets the margin around the map. Takes an object of the following form:
 
diff --git a/example/d3-v5.html b/example/d3-v5.html
new file mode 100644
index 0000000..8168187
--- /dev/null
+++ b/example/d3-v5.html
@@ -0,0 +1,58 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./tubeMap.css" />
+    <script src="https://d3js.org/d3.v5.js"></script>
+    <script src="../dist/d3-tube-map.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css?family=Hammersmith+One"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+
+  <body>
+    <div id="tube-map"></div>
+    <script>
+      var container = d3.select('#tube-map');
+      var width = 1600;
+      var height = 1000;
+
+      var map = d3
+        .tubeMap()
+        .width(width)
+        .height(height)
+        .margin({
+          top: 20,
+          right: 20,
+          bottom: 40,
+          left: 100,
+        })
+        .on('click', function (name) {
+          console.log(name);
+        });
+
+      d3.json('./pubs.json').then(function (data) {
+        container.datum(data).call(map);
+
+        var svg = container.select('svg');
+
+        zoom = d3.zoom().scaleExtent([0.5, 6]).on('zoom', zoomed);
+
+        var zoomContainer = svg.call(zoom);
+        var initialScale = 2;
+        var initialTranslate = [100, 200];
+
+        zoom.scaleTo(zoomContainer, initialScale);
+        zoom.translateTo(
+          zoomContainer,
+          initialTranslate[0],
+          initialTranslate[1]
+        );
+
+        function zoomed() {
+          svg.select('g').attr('transform', d3.event.transform.toString());
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/example/index.html b/example/index.html
index 8168187..46191d1 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="./tubeMap.css" />
-    <script src="https://d3js.org/d3.v5.js"></script>
+    <script src="https://d3js.org/d3.v6.js"></script>
     <script src="../dist/d3-tube-map.js"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Hammersmith+One"
@@ -49,8 +49,8 @@
           initialTranslate[1]
         );
 
-        function zoomed() {
-          svg.select('g').attr('transform', d3.event.transform.toString());
+        function zoomed(event) {
+          svg.select('g').attr('transform', event.transform.toString());
         }
       });
     </script>
diff --git a/example/london-tube.html b/example/london-tube.html
index 394ad27..647b8bd 100644
--- a/example/london-tube.html
+++ b/example/london-tube.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="./tubeMap.css" />
-    <script src="https://d3js.org/d3.v5.js"></script>
+    <script src="https://d3js.org/d3.v6.js"></script>
     <script src="../dist/d3-tube-map.js"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Hammersmith+One"
@@ -49,8 +49,8 @@
           initialTranslate[1]
         );
 
-        function zoomed() {
-          svg.select('g').attr('transform', d3.event.transform.toString());
+        function zoomed(event) {
+          svg.select('g').attr('transform', event.transform.toString());
         }
       });
     </script>
diff --git a/example/minimal.html b/example/minimal.html
index ea67edb..67dc5d8 100644
--- a/example/minimal.html
+++ b/example/minimal.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="./tubeMap.css" />
-    <script src="https://d3js.org/d3.v5.js"></script>
+    <script src="https://d3js.org/d3.v6.js"></script>
     <script src="../dist/d3-tube-map.js"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Hammersmith+One"
diff --git a/example/popover.html b/example/popover.html
index 4895788..2f3fc45 100644
--- a/example/popover.html
+++ b/example/popover.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="./tubeMap.css" />
-    <script src="https://d3js.org/d3.v4.js"></script>
+    <script src="https://d3js.org/d3.v6.js"></script>
     <script
       src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
       integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
@@ -45,7 +45,7 @@
         left: 100,
       });
 
-      d3.json('./pubs.json', function (error, data) {
+      d3.json('./pubs.json').then(function (data) {
         container.datum(data).call(map);
 
         container
@@ -76,8 +76,8 @@
           initialTranslate[1]
         );
 
-        function zoomed() {
-          svg.select('g').attr('transform', d3.event.transform.toString());
+        function zoomed(event) {
+          svg.select('g').attr('transform', event.transform.toString());
           $('.popover').popover('update');
         }
       });
diff --git a/package-lock.json b/package-lock.json
index 1dcc678..4e1f128 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-tube-map",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -374,9 +374,9 @@
       "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
     },
     "d3-brush": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
-      "integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
       "requires": {
         "d3-dispatch": "1",
         "d3-drag": "1",
@@ -437,14 +437,14 @@
       }
     },
     "d3-ease": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
-      "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
     },
     "d3-fetch": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
-      "integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
       "requires": {
         "d3-dsv": "1"
       }
@@ -461,14 +461,14 @@
       }
     },
     "d3-format": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
-      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
     },
     "d3-geo": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.0.tgz",
-      "integrity": "sha512-NalZVW+6/SpbKcnl+BCO67m8gX+nGeJdo6oGL9H6BRUGUL1e+AtPcP4vE4TwCQ/gl8y5KE7QvBzrLn+HsKIl+w==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
       "requires": {
         "d3-array": "1"
       }
@@ -529,9 +529,9 @@
       }
     },
     "d3-selection": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
-      "integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
     },
     "d3-shape": {
       "version": "1.3.7",
@@ -547,9 +547,9 @@
       "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
     },
     "d3-time-format": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
-      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
       "requires": {
         "d3-time": "1"
       }
diff --git a/package.json b/package.json
index 6dba3e1..2849e0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-tube-map",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Draw tube maps in the style of the London Underground",
   "keywords": [
     "d3",
@@ -34,7 +34,7 @@
     "postpublish": "zip -j dist/d3-tube-map.zip -- LICENSE README.md dist/d3-tube-map.js dist/d3-tube-map.min.js"
   },
   "dependencies": {
-    "d3": "5"
+    "d3": "5 - 6"
   },
   "sideEffects": false,
   "devDependencies": {
