我正在使用緯度/經度坐標資料集。我在 d3 中創建了一個地球儀，為每個長/緯度坐標創建標記點。我已經成功地能夠旋轉地球，但標記點不旋轉，我不知道如何將它們附加到旋轉？
謝謝
下面是我的代碼：
<!DOCTYPE html>
<html>
<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 radius = 250;
let locations = [];
var projection = d3.geoOrthographic().scale(radius) .translate([radius, radius]).clipAngle(90);
var svg = d3.select("body").append("svg").attr("width", radius * 2).attr("height", radius * 2).on("mousedown", mousedown).on("mousemove", mousemove).on("mouseup", mouseup);
svg.append("circle") .attr("cx", radius).attr("cy", radius).attr("r", radius).style("fill", "none").style("stroke", "black");
var path = d3.geoPath().projection(projection);
const markerGroup = svg.append('g');
const center = [radius,radius];
d3.queue()
.defer(d3.json, 'https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json')
.defer(d3.json, 'data/disdata.json')
.await((error, worldData, locationData) => {
svg.selectAll(".segment")
.data(topojson.feature(worldData, worldData.objects.countries).features)
.enter().append("path")
.attr("class", "segment")
.attr("d", path)
.style("stroke", "#888")
.style("stroke-width", "1px")
.style("fill", (d, i) => '#e5e5e5')
.style("opacity", ".6")
locations = locationData;
drawMarkers();
});
function trackballAngles(pt) {
var r = projection.scale();
var c = projection.translate();
var x = pt[0] - c[0], y = - (pt[1] - c[1]), ss = x*x y*y;
var z = r*r > 2 * ss ? Math.sqrt(r*r - ss) : r*r / 2 / Math.sqrt(ss);
var lambda = Math.atan2(x, z) * 180 / Math.PI;
var phi = Math.atan2(y, z) * 180 / Math.PI
return [lambda, phi];
}
function composedRotation(λ, ?, γ, δλ, δ?) {
λ = Math.PI / 180 * λ;
? = Math.PI / 180 * ?;
γ = Math.PI / 180 * γ;
δλ = Math.PI / 180 * δλ;
δ? = Math.PI / 180 * δ?;
var sλ = Math.sin(λ), s? = Math.sin(?), sγ = Math.sin(γ),
sδλ = Math.sin(δλ), sδ? = Math.sin(δ?),
cλ = Math.cos(λ), c? = Math.cos(?), cγ = Math.cos(γ),
cδλ = Math.cos(δλ), cδ? = Math.cos(δ?);
var m00 = -sδλ * sλ * c? (sγ * sλ * s? cγ * cλ) * cδλ,
m01 = -sγ * cδλ * c? - sδλ * s?,
m02 = sδλ * cλ * c? - (sγ * s? * cλ - sλ * cγ) * cδλ,
m10 = - sδ? * sλ * cδλ * c? - (sγ * sλ * s? cγ * cλ) * sδλ * sδ? - (sλ * s? * cγ - sγ * cλ) * cδ?,
m11 = sδλ * sδ? * sγ * c? - sδ? * s? * cδλ cδ? * cγ * c?,
m12 = sδ? * cδλ * cλ * c? (sγ * s? * cλ - sλ * cγ) * sδλ * sδ? (s? * cγ * cλ sγ * sλ) * cδ?,
m20 = - sλ * cδλ * cδ? * c? - (sγ * sλ * s? cγ * cλ) * sδλ * cδ? (sλ * s? * cγ - sγ * cλ) * sδ?,
m21 = sδλ * sγ * cδ? * c? - sδ? * cγ * c? - s? * cδλ * cδ?,
m22 = cδλ * cδ? * cλ * c? (sγ * s? * cλ - sλ * cγ) * sδλ * cδ? - (s? * cγ * cλ sγ * sλ) * sδ?;
if (m01 != 0 || m11 != 0) {
γ_ = Math.atan2(-m01, m11);
?_ = Math.atan2(-m21, Math.sin(γ_) == 0 ? m11 / Math.cos(γ_) : - m01 / Math.sin(γ_));
λ_ = Math.atan2(-m20, m22);
} else {
γ_ = Math.atan2(m10, m00) - m21 * λ;
?_ = - m21 * Math.PI / 2;
λ_ = λ;
}
return([λ_ * 180 / Math.PI, ?_ * 180 / Math.PI, γ_ * 180 / Math.PI]);
}
var m0 = null,
o0;
function mousedown() { // remember where the mouse was pressed, in canvas coords
m0 = trackballAngles(d3.mouse(svg.node()));
o0 = projection.rotate();
d3.event.preventDefault();
}
function mousemove() {
if (m0) { // if mousedown
var m1 = trackballAngles(d3.mouse(svg.node()));
o1 = composedRotation(o0[0], o0[1], o0[2], m1[0] - m0[0], m1[1] - m0[1])
projection.rotate(o1);
svg.selectAll("path").attr("d", path);
}
}
function mouseup() {
if (m0) {
mousemove();
m0 = null;
}
}
function drawMarkers() {
const markers = markerGroup.selectAll('circle')
.data(locations);
markers
.enter()
.append('circle')
.merge(markers)
.attr('cx', d => projection([d.Longitude, d.Latitude])[0])
.attr('cy', d => projection([d.Longitude, d.Latitude])[1])
.attr('fill', d => {
const coordinate = [d.Longitude, d.Latitude];
gdistance = d3.geoDistance(coordinate, projection.invert(center));
return gdistance > 1.57 ? 'none' : 'steelblue';
})
.attr('r', 7);
markerGroup.each(function () {
this.parentNode.appendChild(this);
});
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
在滑鼠移動時，您會更新路徑：
svg.selectAll("path").attr("d", path);
但是你不會更新你的圈子，你可以通過重新計算 cx 和 cy 來做到這一點：
markerGroup.selectAll('circle')
.attr('cx', d => projection([d.Longitude, d.Latitude])[0])
.attr('cy', d => projection([d.Longitude, d.Latitude])[1])
所以路徑隨著滑鼠移動，但圓圈保持不變。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/453212.html
標籤：javascript d3.js 回转 数据可视化 坐标