【发布时间】：2020-10-24 15:45:09
【问题描述】：
我的问题与D3 V4 Properly placing a bubble in the US Map 非常相似，但我使用的地图是苏格兰地方当局的地图，所以我不太明白如何应用这两种解决方案。
我正在苏格兰的 choropleth 地图上创建一个气泡图，在我提供的指定位置的圆圈作为纬度/经度坐标。
但是，圆圈的位置完全不在 - Aberdeen 的圆圈在海中！
基于D3 V4 Properly placing a bubble in the US Map，我认为 GeoJSON 可能是预先投影的，所以我使用了两种不同的投影，一种用于地图，一种用于圆。理想情况下，我认为我会找到一种不会导致此问题的不同 GeoJSON，但我认为我使用的来自 https://martinjc.github.io/UK-GeoJSON/ 的 GeoJSON 是唯一可用的。
所以我的问题是，有没有一种合理的方法可以确定这张地图是什么投影，以便我可以对圆圈使用相同的投影？
var year = 2015;
var measurement = "tonnage";
drawMap(year, measurement)
function drawMap(year, measurement) {
// Convert the year and measurement to a concatenated string
var yearString = year.toString();
var measurementString = measurement.toString();
var option = measurementString.concat(yearString);
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
.center([-4.1826, 56.8169])
.scale(1400)
.translate([width / 2, height / 2])
// .scale(20*width / Math.PI)
// .translate([width / 2 + 150, height / 2 +2670]);
// Data and color scale
var data = {};
if (measurement === "tonnage") {
var colorScale = d3.scaleThreshold()
.domain([0, 50, 100, 1000, 2000, 3000, 20000])
.range(d3.schemeBlues[7]);
} else {
var colorScale = d3.scaleThreshold()
.domain([0, 1000, 3000, 5000, 7000, 9000, 10000])
.range(d3.schemeReds[7]);
}
// Load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
.defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/fishperLA.csv", function(d) {
data[d.code] = +d[option];
})
.await(ready);
svg.selectAll("*").remove();
function ready(error, topo) {
// Adding the bubbles in
var markers = [{
long: 2.0943,
lat: 57.1497
}, // Aberdeen
{
long: 2.7005,
lat: 56.2230
}, // Anstruther
{
long: 4.6292,
lat: 55.4586
}, // Ayr
];
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function(d) {
d.total = data[d.properties.LAD13NM] || 0;
return colorScale(d.total);
})
<!-- // Add circles: -->
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.long, d.lat])[0]
})
.attr("cy", function(d) {
return projection([d.long, d.lat])[1]
})
.attr("r", 8)
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4);
}
}<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<svg id="myMap" width="400" height="400"></svg>非常感谢。
【问题讨论】：
标签： javascript d3.js map-projections