Merge pull request #7550 from fredj/d3_example_v4

Update examples to d3.js v4

examples/d3.html

@@ -6,7 +6,7 @@ docs: >
   <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.</p>
 tags: "d3"
 resources:
-  - https://d3js.org/d3.v3.min.js
-  - https://d3js.org/topojson.v1.min.js
+  - https://unpkg.com/d3@4.12.0/build/d3.js
+  - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -40,8 +40,7 @@ d3.json('data/topojson/us.json', function(error, us) {
    * @param {ol.proj.Projection} projection Projection.
    * @return {HTMLCanvasElement} A canvas element.
    */
-  var canvasFunction = function(extent, resolution, pixelRatio,
-      size, projection) {
+  var canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
     var canvasWidth = size[0];
     var canvasHeight = size[1];
 
@@ -50,14 +49,14 @@ d3.json('data/topojson/us.json', function(error, us) {
 
     var context = canvas.node().getContext('2d');
 
-    var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
-    var d3Path = d3.geo.path().projection(d3Projection);
+    var d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
+    var d3Path = d3.geoPath().projection(d3Projection);
 
     var pixelBounds = d3Path.bounds(features);
     var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
     var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
 
-    var geoBounds = d3.geo.bounds(features);
+    var geoBounds = d3.geoBounds(features);
     var geoBoundsLeftBottom = ol.proj.transform(
         geoBounds[0], 'EPSG:4326', projection);
     var geoBoundsRightTop = ol.proj.transform(
@@ -81,7 +80,7 @@ d3.json('data/topojson/us.json', function(error, us) {
     d3Path(features);
     context.stroke();
 
-    return canvas[0][0];
+    return canvas.node();
   };
 
   var layer = new ol.layer.Image({

examples/raster.html

@@ -20,7 +20,7 @@ docs: >
   </p>
 tags: "raster, pixel"
 resources:
-  - https://d3js.org/d3.v3.min.js
+  - https://unpkg.com/d3@4.12.0/build/d3.js
 cloak:
   As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---

examples/raster.js

@@ -144,13 +144,13 @@ var chart = d3.select('#plot').append('svg')
     .attr('width', barWidth * bins)
     .attr('height', plotHeight);
 
-var chartRect = chart[0][0].getBoundingClientRect();
+var chartRect = chart.node().getBoundingClientRect();
 
 var tip = d3.select(document.body).append('div')
     .attr('class', 'tip');
 
 function plot(resolution, counts, threshold) {
-  var yScale = d3.scale.linear()
+  var yScale = d3.scaleLinear()
       .domain([0, d3.max(counts.values)])
       .range([0, plotHeight]);