D3.js的非常简单的教程示例不起作用

时间:2013-02-06 05:03:31

标签: javascript d3.js

我是D3.js的新手。我正在阅读Mike Dewar的 D3入门。我尝试了书中的第一个例子,它不起作用。我一直在撕扯我的声音。我的代码在这里出了什么问题?

<head>部分:

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script>
   function draw(data) {
    "use strict";
   d3.select("body")
      .append("ul")
      .selectAll("li")
      .data(data)
      .enter()
      .append("li")
         .text(function (d) {
            return d.name + ": " + d.status;
         });
      }
</script>

<body>

<script>

    d3.json("flare.json", draw);

</script>

和JSON文件:

[
{
    "status": ["GOOD SERVICE"],
    "name": ["123"],
    "url": [null],
    "text": ["..."],
    "plannedworkheadline": [null],
    "Time": [" 7:35AM"],
    "Date": ["12/15/2011"]
}
]

4 个答案:

答案 0 :(得分:5)

如果您使用的是Chrome,则可能会因为跨域安全限制而无法正常打开文件。尝试Firefox,看看是否是这种情况(它可能会让你正确加载文件)。

如果出现问题,您需要安装WAMP等本地Web服务器(如果您运行的是Windows)或按照维基页面上的说明进行操作:https://github.com/mbostock/d3/wiki

祝你好运

答案 1 :(得分:1)

您是否检查过浏览器控制台以查看您的XHR请求 那是成功的?

当我尝试在我的机器上运行代码时, 在VS 2012 Express中使用本地版本的d3(v3), XHR请求返回时显示错误消息:

HTTP错误404.3 - 未找到

然而,当我改变“耀斑”的延伸时 文件从 .json .txt .js ,如下所示: https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension, 然后XHR请求成功。

答案 2 :(得分:0)

d.name和d.status都是数组,如果要显示其内容或者应该访问这些数组的0索引值,则应该只是字符串;即,d.name [0] +':'+ d.status [0];

答案 3 :(得分:0)

这可能是你的JSON。我做了同样的练习,但效果很好。这是我的js(我附加到div,而不是身体)。我正在运行本地Web服务器。

d3.json("data/mta001.json", drawli);

function drawli(data) {
    "use strict";
    d3.select('#mta001')
      .append('ul')
      .selectAll('ul')
      .data(data)
      .enter()
      .append('li')
        .text(function (d) {
            return d.name + ': ' + d.status;
      });
    d3.selectAll('#mta001 li')
      .style('color', function (d) {
        if ( d.status == 'GOOD SERVICE') {
            return 'green';
        } else {
            return 'fuchsia';
        }
      });
}

这是我的JSON:

[
        {
          "name": "123",
          "status": "DELAYS",
          "text": "delay text",
          "Date": "12/08/2012",
          "Time": " 1:03PM"
        }
]