如何开始使用 xampp 的 d3js 示例？答案

【问题标题】：How to get started with d3js examples using xampp?如何开始使用 xampp 的 d3js 示例？
【发布时间】：2012-09-24 06:41:54
【问题描述】：

现代 javascript 库（例如 protovis 和 d3js）可能提供的所有酷东西给我留下了深刻的印象。作为一名生态学家，我拥有大量非常适合这些高级可视化技术的数据。可悲的是，下载 d3js 库后我已经迷路了。 :(

我在http://d3js.org 上读到，必须设置一个本地主机才能运行示例。我在 Windows 7 系统上安装了 xampp 系统。 localhost/xampp 告诉我一切都很好，但我仍然无法运行大多数示例。例如，“albers”只显示一个灰色框。示例“bar”确实可以正常运行（我想）。

谁能给我一个提示如何在 Windows 7 上正确启动？非常感谢教程的链接。如果我找到正确的方法，我将为世界制作我自己的教程。

我知道我的问题听起来很无聊和不愉快，因为它绝对是初学者的问题，对此我感到非常抱歉，但我真的很想使用 d3js，因为我有很多好的（？）想法。

谢谢！

【问题讨论】：

不确定您在这里做错了什么。我刚刚下载了zip file 并将其解压缩到C:\path\to\xampp\htdocs\d3examples，因此该文件夹现在包含src、lib、examples 等文件夹。在Chrome 和Firefox 中访问http://localhost/d3examples/examples/albers/albers.html 会显示正确的地图。确实尝试通过双击直接打开albers.html文件并得到一个空白页。
现在可以了，非常感谢您的良好解释！我不知道解压缩到 htdocs 中。这意味着，对于某些示例，它需要“localhost/example.html”地址。谢谢！如果可以的话，我会检查你的答案是否最正确。

标签： javascript installation xampp d3.js

【解决方案1】：

当您尝试在本地运行静态文件时，d3 示例库中的某些示例可能会在某些浏览器中产生错误。 Mike 建议您在浏览示例时运行 python 的 simplehttpserver。

在此处查看说明： https://github.com/mbostock/d3/wiki

python -m SimpleHTTPServer 8888

【讨论】：

谢谢。我早些时候尝试过，但不知道该怎么做。在阅读了 mtariq 的评论后，我了解到我只需输入 localhost:8888/d3examples/... 也可以！太好了！
啊，我注意到我只能在没有 :8888 的情况下工作，所以只有浏览器应该读取 localhost/d3examples/examples/albers/albers.html

【解决方案2】：

d3.js 是一个客户端 JavaScript 库，因此您不需要任何后台服务器。开始使用静态文件。这是一个简短的例子：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first d3.js</title>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <div id="mySVG"></div>
    <script src="http://d3js.org/d3.v2.js"></script>
    <script>
      var svg = d3.select("#mySVG")
        .append("svg")
        .attr("width", 200)
        .attr("height", 200)

      svg.append("text")
        .attr("x", 50)
        .attr("y", 50)
        .attr("class", "text")
        .text("d3.js is awesome")
    </script>
  </body>

还有一个 style.css 用于样式：

.text {
  fill: blue;
}

在浏览器中打开index.html，您应该会看到一条蓝色文字，上面写着“d3.js is awesome”。更有帮助的教程是：

当然

https://github.com/mbostock/d3/wiki/Tutorials

【讨论】：

亲爱的 Mirco，非常感谢您的说明性示例。我知道在 dj3s.org 上的源链接已经足够了。我现在将仔细阅读建议的教程。