Thinner lines

johnwalley · Dec 18, 2017 · 88b85f8 · 88b85f8
1 parent 6b7981c
commit 88b85f8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/example/index.html b/example/index.html
@@ -12,8 +12,8 @@
   </div>
   <script>
     var container = d3.select('#tube-map');
-    var width = 3200;
-    var height = 2048;
+    var width = 1600;
+    var height = 1024;
 
     var map = d3.tubeMap()
       .width(width)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-tube-map",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Draw tube maps in the style of the London Underground",
   "keywords": ["d3", "d3-module", "tube", "map"],
   "homepage": "http://www.pubmap.co.uk/",

diff --git a/src/map.js b/src/map.js
@@ -10,7 +10,7 @@ export default function() {
   var xScale = d3.scaleLinear();
   var yScale = d3.scaleLinear();
   var lineWidth;
-  var lineWidthMultiplier = 1.2;
+  var lineWidthMultiplier = 0.8;
   var lineWidthTickRatio = 3 / 2;
   var svg;
   var _data;
@@ -86,14 +86,17 @@ export default function() {
 
       zoom = d3
         .zoom()
-        .scaleExtent([0.2, 6])
+        .scaleExtent([0.5, 6])
         .on('zoom', zoomed);
 
       var zoomContainer = g.call(zoom);
       gMap = zoomContainer.append('g');
 
-      zoom.scaleTo(zoomContainer, 0.5);
-      zoom.translateTo(zoomContainer, 0, -400);
+      var initialScale = 0.7;
+      var initialTranslate = [-200, 200];
+
+      zoom.scaleTo(zoomContainer, initialScale);
+      zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);
 
       function zoomed() {
         gMap.attr('transform', d3.event.transform.toString());
@@ -425,11 +428,11 @@ export default function() {
         textAnchor = 'start';
         break;
       case 'se':
-        pos = [offset / sqrt2, -offset / sqrt2];
+        pos = [offset / sqrt2, -1.4 * offset / sqrt2];
         textAnchor = 'start';
         break;
       case 's':
-        pos = [0, -lineWidthMultiplier * offset];
+        pos = [0, -1.4 * lineWidthMultiplier * offset];
         textAnchor = 'middle';
         break;
       case 'sw':

diff --git a/test/map.html b/test/map.html
@@ -3,10 +3,10 @@
     <svg style="width: 100%; height: 100%;">
       <g>
         <rect width="100%" height="100%" fill="white"></rect>
-        <g transform="translate(0,200) scale(0.5)">
+        <g transform="translate(140,-140) scale(0.7)">
           <g class="lines">
-            <path d="M-40,300L200,300C300,300,300,300,400,200L628.2842712474619,-28.284271247461845" id="Town" stroke="#ffd300"
-              fill="none" stroke-width="120" class="line"></path>
+            <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>