feat: explicitly support d3 v6

Includes docs and examples
johnwalley · Oct 4, 2020 · 96e7de3 · 96e7de3
1 parent 34f6c71
commit 96e7de3
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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": {