如何使用xampp开始使用d3js示例？

Question

I am deeply impressed by all the cool stuff that is possible with the modern javascript libraries such as protovis and d3js. 我对现代javascript库（例如protovis和d3js）可能存在的所有很酷的东西印象深刻。 As an ecologist I have plenty of data that would be perfect for these advanced visualization techniques. 作为一名生态学家，我拥有大量适合这些高级可视化技术的数据。 Sadly, I am lost already after downloading the d3js library. 可悲的是，我在下载d3js库后已经迷路了。 :( :(

I read on http://d3js.org that one has to setup a localhost in order to get the examples running. 我在http://d3js.org上读到，必须设置一个localhost才能运行示例。 I have a xampp system installed on a windows 7 system. 我在Windows 7系统上安装了xampp系统。 Localhost/xampp tells me that everything is fine but still I cannot get most of the examples running. Localhost / xampp告诉我一切都很好但仍然无法让大多数示例运行。 For example "albers" shows only a grey box. 例如，“albers”仅显示灰色框。 The example "bar" does run as it should (I suppose). 示例“bar”确实运行（我想）。

Could anyone give me a hint how to get started correctly on windows 7 ? 任何人都可以给我一个提示如何在Windows 7上正确启动？ Links to tutorials are much appreciated. 非常感谢教程的链接。 If I find out the right way, I will make my own tutorial for the world. 如果我找到正确的方法，我将为世界制作自己的教程。

I know that my question sounds boring and unpleasant since it is the absolute beginner question and I am very sorry for that but I really want to work with d3js because I have sooo many good (?) ideas. 我知道我的问题听起来很无聊和不愉快，因为它是绝对的初学者问题，我很抱歉，但我真的想和d3js合作，因为我有很多好的（？）想法。

thank you! 谢谢！

Answer 1

d3.js is a client side JavaScript library so you don't need any servers in the background. d3.js是一个客户端 JavaScript库，因此您不需要在后台使用任何服务器。 To begin use static files. 开始使用静态文件。 Here is a short example: 这是一个简短的例子：

index.html: 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>

and a style.css for styling: 和样式的style.css：

.text {
  fill: blue;
}

Open index.html in the browser and you should see a blue text saying "d3.js is awesome". 在浏览器中打开index.html ，你应该会看到一个蓝色文字，上面写着“d3.js很棒”。 More helpful tutorials are: 更有用的教程是：

and of course 而且当然

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

Answer 2

Some of the examples in the d3 sample library may produce errors in certain browsers when you try to run static files locally. 当您尝试在本地运行静态文件时，d3示例库中的某些示例可能会在某些浏览器中产生错误。 Mike suggests that you run python's simplehttpserver while browsing the samples. Mike建议您在浏览示例时运行python的simplehttpserver。

See instructions here: https://github.com/mbostock/d3/wiki 请参阅此处的说明： https ： //github.com/mbostock/d3/wiki

python -m SimpleHTTPServer 8888

如何使用xampp开始使用d3js示例？

问题描述

2 个解决方案

解决方案1
9 2012-10-03 13:20:31

解决方案2
5 已采纳 2012-10-04 06:38:22

如何使用xampp开始使用d3js示例？

问题描述

2 个解决方案

解决方案1 9 2012-10-03 13:20:31

解决方案2 5 已采纳 2012-10-04 06:38:22

解决方案1
9 2012-10-03 13:20:31

解决方案2
5 已采纳 2012-10-04 06:38:22