Support for generating a standalone svg file

Author: johnwalley

.gitignore

@@ -2,3 +2,4 @@
 build/
 node_modules
 npm-debug.log
+cambridge-pub-map.svg

example/index.html

@@ -13,16 +13,16 @@
   <script>
     var container = d3.select('#tube-map');
     var width = 1600;
-    var height = 1024;
+    var height = 1000;
 
     var map = d3.tubeMap()
       .width(width)
       .height(height)
       .margin({
-        top: height / 50,
-        right: width / 7,
-        bottom: height / 10,
-        left: width / 7,
+        top: 20,
+        right: 20,
+        bottom: 40,
+        left: 100,
       })
       .on("click", function (name) {
         console.log(name);
@@ -31,6 +31,24 @@
     d3.json("./pubs.json", function (error, 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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-tube-map",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Draw tube maps in the style of the London Underground",
   "keywords": ["d3", "d3-module", "tube", "map"],
   "homepage": "http://www.pubmap.co.uk/",

src/map.js

@@ -66,41 +66,16 @@ export default function() {
         maxYRange = height - margin.top - margin.bottom;
       }
 
-      xScale.domain([minX, maxX]).range([0, maxXRange]);
-      yScale.domain([minY, maxY]).range([maxYRange, 0]);
+      xScale.domain([minX, maxX]).range([margin.left, margin.left + maxXRange]);
+      yScale.domain([minY, maxY]).range([margin.top + maxYRange, margin.top]);
       lineWidth = lineWidthMultiplier * (xScale(1) - xScale(0));
 
       svg = selection
         .append('svg')
         .style('width', '100%')
         .style('height', '100%');
 
-      var g = svg.append('g');
-
-      // Fill with white rectangle to capture zoom events
-      g
-        .append('rect')
-        .attr('width', '100%')
-        .attr('height', '100%')
-        .attr('fill', 'white');
-
-      zoom = d3
-        .zoom()
-        .scaleExtent([0.5, 6])
-        .on('zoom', zoomed);
-
-      var zoomContainer = g.call(zoom);
-      gMap = zoomContainer.append('g');
-
-      var initialScale = 2;
-      var initialTranslate = [100, 200];
-
-      zoom.scaleTo(zoomContainer, initialScale);
-      zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);
-
-      function zoomed() {
-        gMap.attr('transform', d3.event.transform.toString());
-      }
+      gMap = svg.append('g');
 
       if (_data.river !== undefined) {
         drawRiver();

test/map.html

@@ -2,16 +2,13 @@
   <div>
     <svg style="width: 100%; height: 100%;">
       <g>
-        <rect width="100%" height="100%" fill="white"></rect>
-        <g transform="translate(-200,-400) scale(2)">
-          <g class="lines">
-            <path d="M-26.666666666666668,300L200,300C300,300,300,300,400,200L618.8561808316413,-18.856180831641268" id="Town"
-              stroke="#ffd300" fill="none" stroke-width="80" class="line"></path>
-          </g>
-          <g class="interchanges"></g>
-          <g class="stations"></g>
-          <g class="labels"></g>
+        <g class="lines">
+          <path d="M53.33333333333333,380L280,380C380,380,380,380,480,280L698.8561808316413,61.14381916835873" id="Town" stroke="#ffd300"
+            fill="none" stroke-width="80" class="line"></path>
         </g>
+        <g class="interchanges"></g>
+        <g class="stations"></g>
+        <g class="labels"></g>
       </g>
     </svg>
   </div>