Fil · August 14, 2020 16:37
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/topojson-client@3"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <title>Document</title>
 </head>
 <body>
  <script src="https://unpkg.com/topojson-client@3"></script>
  <div style="background:black">
    <canvas id="test"></canvas>
  </div>
  <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
 function getPixelRatio() {
  var ctxForConfig = document.createElement("canvas").getContext("2d");
  var dpr = window.devicePixelRatio || 1;
  var bsr = ctxForConfig.webkitBackingStorePixelRatio ||
    ctxForConfig.mozBackingStorePixelRatio ||
    ctxForConfig.msBackingStorePixelRatio ||
    ctxForConfig.oBackingStorePixelRatio ||
    ctxForConfig.backingStorePixelRatio || 1;
  return dpr / bsr;
 }

 function getHiDPICanvasConfig(w, h) {
  var ratio = getPixelRatio();
  var config = {
    style: {}
  };
  config.ratio = ratio;
  config.width = w * ratio;
  config.height = h * ratio;
  config.style.width = w + "px";
  config.style.height = h + "px";
  return config;
 }
 var width = 900;
 var height = 600;
 var canvasConfig = getHiDPICanvasConfig(width, height);
 var canvas = d3.select("#test");
 canvas.attr("width", canvasConfig.width)
  .attr("height", canvasConfig.height)
  .style("width", canvasConfig.style.width)
  .style("height", canvasConfig.style.height);
 var context = canvas.node().getContext("2d")
 context.setTransform(canvasConfig.ratio, 0, 0, canvasConfig.ratio, 0, 0);
 var projection = d3.geoMercator()
  .precision(0.1)
  .translate([width / 2, height / 2]);
 var path = d3.geoPath(projection, context);
 var scale = projection.scale();
 var translate = projection.translate();

 function zoomToGeoJson() {
  var geoJson = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -471.35742187499994,
            44.276671273775186
          ],
          [
            -462.919921875,
            37.50972584293751
          ],
          [
            -451.14257812499994,
            38.54816542304656
          ]
        ]
      }
    }]
  };
  projection.fitExtent([
    [10, 10],
    [width - 10, height - 10]
  ], geoJson);
  
  canvas.property("__zoom", d3.zoomIdentity.translate(...projection.translate()).scale(projection.scale()));

 }

 fetch('https://jsonblob.com/api/50717bc5-de3c-11ea-b828-1fb275255dfd')
  .then(response => response.json())
  .then(world => {
    zoomToGeoJson();
    renderFeature();

    var zoom = d3.zoom()
      .scaleExtent([0.1, Infinity])
      .on("zoom", zoomByProjection);

    canvas.call(zoom);

    function zoomByProjection() {
      context.clearRect(0, 0, width, height);
      var transform = d3.event.transform;
      projection.translate([transform.x, transform.y]);
      projection.scale(transform.k);
      renderFeature();
    }

    function renderFeature() {
      context.beginPath();
      context.fillStyle = "red";
      path(topojson.mesh(world));
      context.fill();
    }
  });

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<title>Document</title>
	</head>
	<body>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<div style="background:black">
	<canvas id="test"></canvas>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	function getPixelRatio() {
	var ctxForConfig = document.createElement("canvas").getContext("2d");
	var dpr = window.devicePixelRatio \|\| 1;
	var bsr = ctxForConfig.webkitBackingStorePixelRatio \|\|
	ctxForConfig.mozBackingStorePixelRatio \|\|
	ctxForConfig.msBackingStorePixelRatio \|\|
	ctxForConfig.oBackingStorePixelRatio \|\|
	ctxForConfig.backingStorePixelRatio \|\| 1;
	return dpr / bsr;
	}

	function getHiDPICanvasConfig(w, h) {
	var ratio = getPixelRatio();
	var config = {
	style: {}
	};
	config.ratio = ratio;
	config.width = w * ratio;
	config.height = h * ratio;
	config.style.width = w + "px";
	config.style.height = h + "px";
	return config;
	}
	var width = 900;
	var height = 600;
	var canvasConfig = getHiDPICanvasConfig(width, height);
	var canvas = d3.select("#test");
	canvas.attr("width", canvasConfig.width)
	.attr("height", canvasConfig.height)
	.style("width", canvasConfig.style.width)
	.style("height", canvasConfig.style.height);
	var context = canvas.node().getContext("2d")
	context.setTransform(canvasConfig.ratio, 0, 0, canvasConfig.ratio, 0, 0);
	var projection = d3.geoMercator()
	.precision(0.1)
	.translate([width / 2, height / 2]);
	var path = d3.geoPath(projection, context);
	var scale = projection.scale();
	var translate = projection.translate();

	function zoomToGeoJson() {
	var geoJson = {
	"type": "FeatureCollection",
	"features": [{
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[
	-471.35742187499994,
	44.276671273775186
	],
	[
	-462.919921875,
	37.50972584293751
	],
	[
	-451.14257812499994,
	38.54816542304656
	]
	]
	}
	}]
	};
	projection.fitExtent([
	[10, 10],
	[width - 10, height - 10]
	], geoJson);

	canvas.property("__zoom", d3.zoomIdentity.translate(...projection.translate()).scale(projection.scale()));

	}

	fetch('https://jsonblob.com/api/50717bc5-de3c-11ea-b828-1fb275255dfd')
	.then(response => response.json())
	.then(world => {
	zoomToGeoJson();
	renderFeature();

	var zoom = d3.zoom()
	.scaleExtent([0.1, Infinity])
	.on("zoom", zoomByProjection);

	canvas.call(zoom);

	function zoomByProjection() {
	context.clearRect(0, 0, width, height);
	var transform = d3.event.transform;
	projection.translate([transform.x, transform.y]);
	projection.scale(transform.k);
	renderFeature();
	}

	function renderFeature() {
	context.beginPath();
	context.fillStyle = "red";
	path(topojson.mesh(world));
	context.fill();
	}
	});