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();
}
});
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>