Merge pull request #9 from datavis-tech/d3-v4-upgrade

D3 v4 upgrade
datavis-tech · Jun 22, 2016 · e2d399b · e2d399b
2 parents 4a49e63 + 750cc20
commit e2d399b
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 16 deletions.
diff --git a/tileMap/d3.geo.tile.min.js b/tileMap/d3.geo.tile.min.js
@@ -1 +1,53 @@
-d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};
+d3.geoTile = function() {
+  var size = [960, 500],
+      scale = 256,
+      translate = [size[0] / 2, size[1] / 2],
+      zoomDelta = 0;
+
+  function tile() {
+    var z = Math.max(Math.log(scale) / Math.LN2 - 8, 0),
+        z0 = Math.round(z + zoomDelta),
+        k = Math.pow(2, z - z0 + 8),
+        origin = [(translate[0] - scale / 2) / k, (translate[1] - scale / 2) / k],
+        tiles = [],
+        cols = d3.range(Math.max(0, Math.floor(-origin[0])), Math.max(0, Math.ceil(size[0] / k - origin[0]))),
+        rows = d3.range(Math.max(0, Math.floor(-origin[1])), Math.max(0, Math.ceil(size[1] / k - origin[1])));
+
+    rows.forEach(function(y) {
+      cols.forEach(function(x) {
+        tiles.push([x, y, z0]);
+      });
+    });
+
+    tiles.translate = origin;
+    tiles.scale = k;
+
+    return tiles;
+  }
+
+  tile.size = function(_) {
+    if (!arguments.length) return size;
+    size = _;
+    return tile;
+  };
+
+  tile.scale = function(_) {
+    if (!arguments.length) return scale;
+    scale = _;
+    return tile;
+  };
+
+  tile.translate = function(_) {
+    if (!arguments.length) return translate;
+    translate = _;
+    return tile;
+  };
+
+  tile.zoomDelta = function(_) {
+    if (!arguments.length) return zoomDelta;
+    zoomDelta = +_;
+    return tile;
+  };
+
+  return tile;
+};
diff --git a/tileMap/index.html b/tileMap/index.html
@@ -15,36 +15,40 @@
 
 </style>
 <body>
-<script src="//d3js.org/d3.v3.min.js"></script>
+<script src="//d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="d3.geo.tile.min.js"></script>
 <script>
 
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
-    stationColor = d3.scale.linear().range(["rgb(253,183,123)", "rgb(164,53,3)"]),    
+    stationColor = d3.scaleLinear().range(["rgb(253,183,123)", "rgb(164,53,3)"]),    
     stationSize = .0001;
 
-var tile = d3.geo.tile()
+var tile = d3.geoTile()
     .size([width, height]);
 
-var projection = d3.geo.mercator()
+var projection = d3.geoMercator()
     .scale((1 << 12) / 2 / Math.PI)
     .translate([width / 2, height / 2]);
 
 var center = projection([-100, 40]);
 
-var path = d3.geo.path()
+var path = d3.geoPath()
     .projection(projection);
 
-var zoom = d3.behavior.zoom()
-    .scale(198668.00180565089)
-    .translate([-41951.17534656764, 7402.282555357876]) //changed the scale
+var zoom = d3.zoom()
     .on("zoom", zoomed);
 //    .scale(projection.scale() * 2 * Math.PI)
 //    .scaleExtent([1 << 11, 1 << 14])
     //.translate([width - center[0], height - center[1]])
 
+function transform(){
+  return d3.zoomIdentity
+    .translate(-41951.17534656764, 7402.282555357876)
+    .scale(198668.00180565089)
+}
+
 // With the center computed, now adjust the projection such that
 // it uses the zoom behavior’s translate and scale.
 projection
@@ -60,20 +64,21 @@
 var vector = svg.append("g");
 
 svg.call(zoom);
+svg.call(zoom.transform, transform());
 //vector.attr("d", path(topojson.mesh(us, us.objects.counties)));
 zoomed();
 
 function zoomed() {
-     console.log(zoom.scale());
-     console.log(zoom.translate());
+  var transform = d3.zoomTransform(svg.node());
+  console.log(transform);
+  //console.log(transform.scale());
+  //console.log(transform.translate());
   var tiles = tile
-      .scale(zoom.scale())
-      .translate(zoom.translate())
+      .scale(transform.k)
+      .translate([transform.x, transform.y])
       ();
 
-  vector
-      .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
-      .style("stroke-width", 1 / zoom.scale());
+  vector.attr("transform", transform);
 
   var image = raster
       .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")