Javascript 如何运行Mike Bostock'；D3的例子是什么？

我一直在尝试运行Mike Bostock的示例，但是如果您试图在本地复制它，那么对他的json文件的引用是不正确的

问题来自以下代码行：

d3.json("/mbostock/raw/4090846/world-110m.json", function(error, topo) {
      var land = topojson.feature(topo, topo.objects.land),
          grid = graticule();
});

我遵循了这个例子：

并尝试将url更改为这些变体，以便更好地为外部用户引用这些文件

"https://raw.github.com/mbostock/topojson/master/examples/world-110m.json"
"https://render.github.com/mbostock/topojson/master/examples/world-110m.json"
"http://bl.ocks.org/mbostock/raw/4090846/world-110m.json"

但我从未被允许进入。你知道如何正确引用json文件吗

我也试过他的一些例子，每次都遇到同样的问题。还有其他人成功地复制了这些例子吗

以小提琴形式复制的问题：

---

您可以在此处直接访问数据：

要使其工作，您需要在脚本中创建一个新变量，并直接将json分配给它

您提供的小提琴中的代码：

var topo = // Paste data from provided link here. It will be one big object literal.

var width = 960,
    height = 960,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geo.orthographic()
    .scale(width / 2.1)
    .translate([width / 2, height / 2])
    .precision(.5);

var graticule = d3.geo.graticule();

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

var context = canvas.node().getContext("2d");

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

// d3.json("https://render.github.com/mbostock/topojson/master/examples/world-110m.json", function(error, topo) {
  var land = topojson.feature(topo, topo.objects.land), // topo var is now provided by pasted-in data instead of fetched json.
      grid = graticule();

  d3.timer(function() {
    context.clearRect(0, 0, width, height);

    projection.rotate([speed * (Date.now() - start), -15]).clipAngle(90);

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    projection.clipAngle(180);

    context.beginPath();
    path(land);
    context.fillStyle = "#dadac4";
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    projection.clipAngle(90);

    context.beginPath();
    path(land);
    context.fillStyle = "#737368";
    context.fill();
    context.lineWidth = .5;
    context.strokeStyle = "#000";
    context.stroke();
  });
// });

d3.select(self.frameElement).style("height", height + "px");

我可能会直接修改fiddle，但是json数据文件太大了，当我尝试粘贴它时，jsiddle会被阻塞

---

希望这有帮助。

由于同源策略，您无法访问远程json文件。您将无法使用file:protocol检索JSON对象。除非您希望通过直接嵌入JSON来对代码执行操作，否则您必须运行本地服务器

运行本地web服务器的一种简单方法是执行：

python -m SimpleHTTPServer 8888 &

---

从站点的“根”目录，然后通过

http://localhost:8888

由于同源策略，您无法访问远程json文件。您将无法使用

文件：

协议检索JSON对象。除非你想通过直接嵌入JSON来对代码进行操作，否则你必须运行一个本地服务器。我也需要运行一个简单的服务器吗？是否没有办法使用

jsonp

？另外，如何找到示例json文件。他们没有在GIST或他的网站上列出。我只是碰巧在另一篇SO帖子中找到了github链接。@StephenThomas如果您将其作为答案发布，并从根目录添加

python-m SimpleHTTPServer 8888&

，我会接受。更新的fiddle，通过rawgit.com加载json数据：只需小心使用代码中的示例-它们是GPLed的，我个人无法理解这在Javascript中意味着什么。我知道这大约是一年后的事，但是创建自己的服务器来绕过同源策略有什么用呢？仅供参考，在Python 3中，等效的命令是

python-mhttp.server8888&