xxxxxxxxxx<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } svg { fill: steelblue; } </style></head><body> <svg></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script> <script> var width = document.documentElement.clientWidth, height = width / 2, svg = d3.select("svg").attr('width', width).attr('height', height), path, counties; d3.json("ok-counties.json", function(error, ok) { if (error) throw error; counties = topojson.feature(ok, ok.objects.counties); path = d3.geoPath() .projection(d3.geoMercator() .fitSize([width, height], counties)); svg.append("path") .datum(counties) .attr("d", path); }); var optimizedResize = (function() { var callbacks = [], running = false; // fired on resize event function resize() { if (!running) { running = true; if (window.requestAnimationFrame) { window.requestAnimationFrame(runCallbacks); } else { setTimeout(runCallbacks, 66); } } } // run the actual callbacks function runCallbacks() { callbacks.forEach(function(callback) { callback(); }); running = false; } // adds callback to loop function addCallback(callback) { if (callback) { callbacks.push(callback); } } return { // public method to add additional callback add: function(callback) { if (!callbacks.length) { window.addEventListener('resize', resize); } addCallback(callback); } }; }()); // start process optimizedResize.add(function() { width = document.documentElement.clientWidth; height = width / 2; svg.attr('width', width).attr('height', height); path.projection(d3.geoMercator() .fitSize([width, height], counties)); d3.select('path').attr('d', path); }); </script></body></html> https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js