我如何拖动地球并旋转它?

时间:2017-09-22 02:44:16

标签: javascript d3.js

我想通过向此源代码添加拖动功能来旋转地球。 此代码稍微修改了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()函数添加鼠标拖动功能。

但我不知道如何将其添加到此代码中。

请帮帮我。

0 个答案:

没有答案