Javascript 拖动正交圆d3.js
我正在尝试创建一个带有拖动的球体(正交投影),它上面也有圆 我已经能够通过拖动创建地球仪,并添加圆圈。问题是,当我拖动这些圆时,它们不会随着地球移动 这是我的bl.ock,您可以在其中找到我的代码: 我已经看过其他bl.ock示例,例如: 还有这个: 但我一直没能让它为我工作。他们的方法似乎和我的完全不同,我也不完全理解他们的代码 有人知道我需要向代码中添加什么方法或内容吗 谢谢 以下是我的javascript代码:Javascript 拖动正交圆d3.js,javascript,d3.js,Javascript,D3.js,我正在尝试创建一个带有拖动的球体(正交投影),它上面也有圆 我已经能够通过拖动创建地球仪,并添加圆圈。问题是,当我拖动这些圆时,它们不会随着地球移动 这是我的bl.ock,您可以在其中找到我的代码: 我已经看过其他bl.ock示例,例如: 还有这个: 但我一直没能让它为我工作。他们的方法似乎和我的完全不同,我也不完全理解他们的代码 有人知道我需要向代码中添加什么方法或内容吗 谢谢 以下是我的javascript代码: (function(){ var h = 600; var w
(function(){
var h = 600;
var w = 900;
var i = 0;
var map = void 0;
var world = void 0;
var US = void 0;
var margin = {
top: 10,
bottom: 40,
left: 0,
right: 30
};
var circleScale = d3.scaleSqrt()
.domain([0, 4445])
.range([0.5, 10])
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var dragging = function(d){
var c = projection.rotate();
projection.rotate([c[0] + d3.event.dx/6, c[1] - d3.event.dy/6])
map.selectAll('path').attr('d', path);
}
var drag = d3.drag()
.on("drag", dragging)
var projection = d3.geoOrthographic().clipAngle(90);
var path = d3.geoPath().projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h)
d3.json("world.json", function(json){
d3.csv("arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv", function(error, data){
var countries = topojson.feature(json, json.objects.countries).features
var US = countries[168]
map = svg.append('g').attr('class', 'boundary');
world = map.selectAll('path').data(countries);
US = map.selectAll('.US').data([US]);
Circles = map.selectAll(".circles").data(data)
console.log(countries[168])
world.enter()
.append("path")
.attr("class", "boundary")
.attr("d", path)
US.enter()
.append("path")
.attr("class", "US")
.attr("d", path)
.style("fill", "lightyellow")
.style("stroke", "orange")
Circles.enter()
.append("circle")
.attr("class", "importer")
.attr("r", function(d){
return circleScale(d.Millions)
})
.attr("cx", function(d){
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[0];
})
.attr("cy", function(d){
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[1];
})
.style("fill", "#cd0d0e")
svg.append("rect")
.attr("class", "overlay")
.attr("width", w)
.attr("height", h)
.call(drag)
})
})
})();
您必须在
拖动功能中更新圆的位置:
var dragging = function(d) {
var c = projection.rotate();
projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
map.selectAll('path').attr('d', path);
map.selectAll(".circles").attr("cx", function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[0];
})
.attr("cy", function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[1];
})
}
此外,请使用正确的类选择它们
关于性能,如果您不想计算两次coords
,可以使用每个
:
var dragging = function(d) {
var c = projection.rotate();
projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
map.selectAll('path').attr('d', path);
map.selectAll(".circles").each(function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
d3.select(this).attr("cx", function(d) {
return coords[0];
})
.attr("cy", function(d) {
return coords[1];
})
})
}
这是您的bl.OCK和更改:
PS:你对地球另一边的圆圈有问题。。。然而,这是另一个问题,已经在S.O.这里讨论过。例如,我的回答是:谢谢你的链接。你联系到的那个方法对我来说似乎不太管用。发生的情况是这些点完全消失了。似乎d[0]和d[1]未定义。@Julien请将此问题作为新问题发布,并提供所有相关详细信息,以便我们尝试修复它。