我想通过向此源代码添加拖动功能来旋转地球。 此代码稍微修改了KoGor的源代码。 Oringinal Source = http://bl.ocks.org/KoGor/7023703。
var mapWidth = 960,
mapHeight = 500,
ortho = true,
corr = 0,
sens = 0.25,
focused;
var projectionGlobe = d3.geo.orthographic()
.scale(240)
.rotate([0, 0])
.translate([mapWidth/2, mapHeight/2])
.clipAngle(90);
var projection = projectionGlobe;
var path = d3.geo.path()
.projection(projection);
var svgMap = d3.select("div#map").append("svg")
.attr("overflow", "hidden")
.attr("width", mapWidth)
.attr("height", mapHeight);
var zoneTooltip =
d3.select("div#map").append("div").attr("class","zoneTooltip"),
infoLabel = d3.select("div#map").append("div").attr("class", "infoLabel");
var g = svgMap.append("g")
//Loading Data...
queue()
.defer(d3.json, "world-110m.json")
.defer(d3.tsv, "world-110m-country-names.tsv")
.await(ready);
function ready(error, world, countryData) {
var countryById = {},
countries = topojson.feature(world, world.objects.countries).features;
//Adding countries by name
countryData.forEach(function(d){
countryById[d.id] = d.name;
});
//Drawing countries on the globe
var world = g.selectAll("path").data(countries);
world.enter().append("path")
.attr("class", "mapData")
.attr("d", path)
.classed("ortho", ortho = true);
//Events processing
world.on("mouseover", function(d){
if (ortho === true) {
infoLabel.text(countryById[d.id])
.style("display", "inline");
} else {
zoneTooltip.text(countryById[d.id])
.style("left", (d3.event.pageX + 7) + "px")
.style("top", (d3.event.pageY - 15) + "px")
.style("display", "block")
}
})
.on("mouseout", function() {
if (ortho === true) {
infoLabel.style("display", "none");
} else {
zoneTooltip.style("display", "noen");
}
})
.on("mousemove", function() {
if (ortho === false) {
zoneTooltip.style("left", (d3.event.pageX + 7) + "px")
.style("top", (d3.event.pageY - 15) + "px");
}
});
}
我想使用 d3.behavior.drag()函数添加鼠标拖动功能。
但我不知道如何将其添加到此代码中。
请帮帮我。