Built with blockbuilder.org
see https://stackoverflow.com/questions/49534470/d3-js-v5-promise-all-replaced-d3-queue
license: mit |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500); | |
var files = ["mines.json", "mines_centroid.json"]; | |
var promises = []; | |
files.forEach(function (url) { | |
promises.push(d3.json(url)); | |
}); | |
Promise.all(promises).then(function (val) { | |
drawMap(val[0], val[1]); | |
}); | |
var projection = d3.geoMercator(); | |
var geoPath = d3.geoPath() | |
.projection(projection); | |
var radius = d3.scaleLog(); | |
function drawMap(mines, centroid) { | |
console.log("drawMap", mines.features, centroid.features); | |
projection.center([22.9696994071445, 40.8135651828386]); | |
projection.fitSize([960, 500], mines); | |
svg.append("g") | |
.selectAll("path") | |
.data(mines.features) | |
.enter() | |
.append("path") | |
.attr("d", geoPath) | |
.attr("stroke", "blue") | |
.attr("fill", "white") | |
.attr("class", "mines"); | |
addCentroid(centroid); | |
} | |
function addCentroid(centroid) { | |
console.log(centroid); | |
var points = svg.selectAll("circle") | |
.data(centroid.features, function (d) { | |
return d; | |
}) | |
.enter().append("circle") | |
.attr('r', function (d) { | |
return radius * 1.5 | |
}) | |
.attr('cx', function (d) { | |
return projection(d.geometry.coordinates)[0] | |
}) | |
.attr('cy', function (d) { | |
return projection(d.geometry.coordinates)[1] | |
}) | |
.attr("class", "centroid") | |
.attr("id", function (d) { | |
return d.properties.ID | |
}) | |
} | |
</script> | |
</body> |