我创建了一个带有圆和拖动功能的地球仪。问题是这些圆出现在地球仪的远侧,我想让这些圆被隐藏起来。
我的代码可以在这里找到: http://bl.ocks.org/anonymous/dc2d4fc810550586d40d4b1ce9088422/40c6e199a5be4e152c0bd94a13ea94eba41f004b 例如,我希望我的地球仪像这个一样工作: https://bl.ocks.org/larsvers/f8efeabf480244d59001310f70815b4e 我看到了一些解决方案,例如这个: How to move points in an orthogonal map? 但对我来说并不完全适用。点只是消失了,因为d[0]和d[1]似乎未定义。
我还尝试过使用类似于这个方法: http://blockbuilder.org/tlfrd/df1f1f705c7940a6a7c0dca47041fec8 但那似乎也不起作用。问题在于他使用json作为数据,而我的圆数据与json独立。
我找到的唯一类似的例子是这个: https://bl.ocks.org/curran/115407b42ef85b0758595d05c825b346 但我并不真正理解他的代码。他的方法与我的有很大不同。
以下是我的JavaScript代码:
我的代码可以在这里找到: http://bl.ocks.org/anonymous/dc2d4fc810550586d40d4b1ce9088422/40c6e199a5be4e152c0bd94a13ea94eba41f004b 例如,我希望我的地球仪像这个一样工作: https://bl.ocks.org/larsvers/f8efeabf480244d59001310f70815b4e 我看到了一些解决方案,例如这个: How to move points in an orthogonal map? 但对我来说并不完全适用。点只是消失了,因为d[0]和d[1]似乎未定义。
我还尝试过使用类似于这个方法: http://blockbuilder.org/tlfrd/df1f1f705c7940a6a7c0dca47041fec8 但那似乎也不起作用。问题在于他使用json作为数据,而我的圆数据与json独立。
我找到的唯一类似的例子是这个: https://bl.ocks.org/curran/115407b42ef85b0758595d05c825b346 但我并不真正理解他的代码。他的方法与我的有很大不同。
以下是我的JavaScript代码:
(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);
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];
})
}
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", "circles")
.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)
})
})
})();
path
怎么样,就像我的链接答案中的最后一个bl.ocks一样?那不是更容易吗? - Gerardo Furtado