Svg can'；不要让地球仪在d3中旋转_Svg_D3.js

Svg can'；不要让地球仪在d3中旋转

svg d3.js

Svg can'；不要让地球仪在d3中旋转,svg,d3.js,Svg,D3.js,我试图让d3地球仪在你点击列表中某个国家时旋转到某个特定的国家。首先，我试图让下面的示例正常工作（我从中获得），但它抛出了一个错误TypeError:world在第100行中未定义。有人能帮忙吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Earth globe</title> <script src="./d3/d3.v3

我试图让d3地球仪在你点击列表中某个国家时旋转到某个特定的国家。首先，我试图让下面的示例正常工作（我从中获得），但它抛出了一个错误TypeError:world在第100行中未定义。有人能帮忙吗

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Earth globe</title>
<script src="./d3/d3.v3.min.js"></script>
<script src="./d3/topojson.v1.min.js"></script>
<script src="./d3/queue.v1.min.js"></script>
</head>
<style type="text/css">

.water {
  fill: #00248F;
}

.land {
  fill: #A98B6F;
  stroke: #FFF;
  stroke-width: 0.7px;
}

.land:hover {
  fill:#33CC33;
  stroke-width: 1px;
}

.focused {
  fill: #33CC33;
}

select {
  position: absolute;
  top: 20px;
  left: 580px;
  border: solid #ccc 1px;
  padding: 3px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
}

.countryTooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
  padding: 5px;
  text-align: left;
  border: solid #ccc 1px;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}

</style>
<body>
  <script>

  var width = 600,
  height = 500,
  sens = 0.25,
  focused;

  //Setting projection

  var projection = d3.geo.orthographic()
  .scale(245)
  .rotate([0, 0])
  .translate([width / 2, height / 2])
  .clipAngle(90);

  var path = d3.geo.path()
  .projection(projection);

  //SVG container

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

  //Adding water

  svg.append("path")
  .datum({type: "Sphere"})
  .attr("class", "water")
  .attr("d", path);

  var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip"),
  countryList = d3.select("body").append("select").attr("name", "countries");


  queue()
  .defer(d3.json, "http://bl.ocks.org/KoGor/raw/5685937/world-110m.json")
  .defer(d3.tsv, "http://bl.ocks.org/KoGor/raw/5685937/world-110m-country-names.tsv")
  .await(ready);

  //Main function

  function ready(error, world, countryData) {

    var countryById = {},
    countries = topojson.feature(world, world.objects.countries).features;

    //Adding countries to select

    countryData.forEach(function(d) {
      countryById[d.id] = d.name;
      option = countryList.append("option");
      option.text(d.name);
      option.property("value", d.id);
    });

    //Drawing countries on the globe

    var world = svg.selectAll("path.land")
    .data(countries)
    .enter().append("path")
    .attr("class", "land")
    .attr("d", path)

    //Drag event

    .call(d3.behavior.drag()
      .origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
      .on("drag", function() {
        var rotate = projection.rotate();
        projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
        svg.selectAll("path.land").attr("d", path);
        svg.selectAll(".focused").classed("focused", focused = false);
      }))

    //Mouse events

    .on("mouseover", function(d) {
      countryTooltip.text(countryById[d.id])
      .style("left", (d3.event.pageX + 7) + "px")
      .style("top", (d3.event.pageY - 15) + "px")
      .style("display", "block")
      .style("opacity", 1);
    })
    .on("mouseout", function(d) {
      countryTooltip.style("opacity", 0)
      .style("display", "none");
    })
    .on("mousemove", function(d) {
      countryTooltip.style("left", (d3.event.pageX + 7) + "px")
      .style("top", (d3.event.pageY - 15) + "px");
    });

    //Country focus on option select

    d3.select("select").on("change", function() {
      var rotate = projection.rotate(),
      focusedCountry = country(countries, this),
      p = d3.geo.centroid(focusedCountry);

      svg.selectAll(".focused").classed("focused", focused = false);

    //Globe rotating

    (function transition() {
      d3.transition()
      .duration(2500)
      .tween("rotate", function() {
        var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
        return function(t) {
          projection.rotate(r(t));
          svg.selectAll("path").attr("d", path)
          .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });
        };
      })
      })();
    });

    function country(cnt, sel) { 
      for(var i = 0, l = cnt.length; i < l; i++) {
        if(cnt[i].id == sel.value) {return cnt[i];}
      }
    };

  };
  </script>
</body>
</html>


地球仪
.水{
填充：#00248F；
}
.土地{
填充物：#A98B6F；
冲程：#FFF；
笔划宽度：0.7px；
}
.陆地：悬停{
填充：#33CC33；
笔画宽度：1px；
}
.专注{
填充：#33CC33；
}
挑选{
位置：绝对位置；
顶部：20px；
左：580px；
边框：实心#ccc 1px；
填充：3倍；
盒影：插入1px 1px 2px#ddd8dc；
}
.countryTooltip{
位置：绝对位置；
显示：无；
指针事件：无；
背景：#fff；
填充物：5px；
文本对齐：左对齐；
边框：实心#ccc 1px；
颜色：#666；
字体大小：14px；
字体系列：无衬线；
}
可变宽度=600，
高度=500，
sens=0.25，
专注；
//设置投影
var projection=d3.geo.orthographic（）
.比例尺（245）
.旋转（[0,0]）
.translate（[宽度/2，高度/2]）
.clipAngle（90）；
var path=d3.geo.path（）
.投影（投影）；
//SVG容器
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//加水
追加（“路径”）
.datum（{type:“Sphere”}）
.attr（“类”、“水”）
.attr（“d”，路径）；
var countryTooltip=d3.select（“body”）.append（“div”）.attr（“class”，“countryTooltip”），
countryList=d3.select（“body”）.append（“select”）.attr（“name”、“countries”）；
队列（）
.defer（d3.json，“http://bl.ocks.org/KoGor/raw/5685937/world-110m.json")
.延迟（d3.tsv，“http://bl.ocks.org/KoGor/raw/5685937/world-110m-country-names.tsv")
.等待（准备好）；
//主要功能
功能就绪（错误、世界、国家数据）{
var countryById={}，
countries=topojson.feature（world，world.objects.countries）.features；
//添加要选择的国家/地区
countryData.forEach（函数（d）{
countryById[d.id]=d.name；
option=countryList.append（“option”）；
选项.文本（d.名称）；
选择权。财产（“价值”，d.id）；
});
//吸引世界各国
var world=svg.selectAll（“path.land”）
.数据（国家）
.enter（）.append（“路径”）
.attr（“类别”、“土地”）
.attr（“d”，路径）
//拖动事件
.call（d3.behavior.drag（））
.origin（函数（）{var r=projection.rotate（）；返回{x:r[0]/sens，y:-r[1]/sens}；}）
.on（“拖动”，函数（）{
var rotate=projection.rotate（）；
旋转（[d3.event.x*sens，-d3.event.y*sens，rotate[2]]）；
svg.selectAll（“path.land”）.attr（“d”，path）；
svg.selectAll（“.focused”）.classed（“focused”，focused=false）；
}))
//鼠标事件
.on（“鼠标悬停”，功能（d）{
countryTooltip.text（countryById[d.id]）
.style（“左”（d3.event.pageX+7）+“px”）
.style（“top”，（d3.event.pageY-15）+“px”）
.style（“显示”、“块”）
.样式（“不透明”，1）；
})
.开启（“鼠标出”，功能（d）{
countryTooltip.style（“不透明度”，0）
.样式（“显示”、“无”）；
})
.on（“mousemove”，函数（d）{
countryTooltip.style（“左”（d3.event.pageX+7）+“px”）
.style（“top”，（d3.event.pageY-15）+“px”）；
});
//国家重点关注选项选择
d3.选择（“选择”）。打开（“更改”，函数（）{
var rotate=projection.rotate（），
focusedCountry=国家（国家，本），
p=d3.地理质心（聚焦国家）；
svg.selectAll（“.focused”）.classed（“focused”，focused=false）；
//地球自转
（功能转换（）{
d3.过渡（）
.持续时间（2500）
.tween（“旋转”，函数（）{
var r=d3.interpolate（projection.rotate（），[-p[0]，-p[1]]）；
返回函数（t）{
投影。旋转（r（t））；
svg.selectAll（“路径”）.attr（“d”，路径）
.classed（“focused”，函数（d，i）{返回d.id==focusedCountry.id？focused=d:false；}）；
};
})
})();
});
功能国家（cnt，sel）{
对于（变量i=0，l=cnt.length；i

如果您在本地运行此程序，则需要按照说明运行Web服务器。我有Windows 7，正在从本地运行它。不使用Python。请参阅上面的注释。您需要运行Web服务器。？看起来我确实有一个本地的web服务器——我已经在上面开发了很多年，有mysql也有mysql。您提供的页面没有说明我需要做什么来在本地配置MS IIS web服务器。好的，如果您有一个web服务器，那么它是其他的。您是否检查了

错误变量？