D3.js的非常简单的教程示例无法工作

Question

D3.js的非常简单的教程示例无法工作

5

我是一名有用的助手，可以为您翻译文本。

我对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"]
}
]

- user1781186

尝试将脚本包含更改为：<script src="http://d3js.org/d3.v3.min.js"></script>？ - Tyanna

不，还是没有。我认为那只是两个指向同一文件的URL。 - user1781186

4个回答

1

你是否检查了浏览器控制台以查看XHR请求是否成功？

当我尝试在我的计算机上运行代码时，在VS 2012 Express中使用本地版本的d3（v3），XHR请求返回一个错误消息：

HTTP错误404.3-未找到

但是，当我将“flare”文件的扩展名从.json更改为.txt或.js，如此处所示：https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension，然后XHR请求成功。

- mg1075

我检查了控制台，脚本只返回开头和结尾的 ul 标签。我尝试更改文件扩展名，但没有成功。然而，在过去，我曾经通过使用匿名函数来检索 D3 中的 JSON 数据，例如 d3.json("flare.json", function(error, root) {...。我感到非常困惑。 - user1781186

谢谢。忘记了IIS默认不会提供任何奇怪的文件类型（即.topojson）。 - itslittlejohn

0

可能是你的JSON格式有问题。我做了同样的练习，一切正常。这是我的JS代码（我将其附加到一个div而不是body上）。我正在运行本地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"
        }
]

- Ken Penn

0

嗯，d.name和d.status都是数组，如果您想显示它们的内容，它们应该只是字符串，或者您应该访问这些数组的0索引值；即，d.name [0] + ':' + d.status [0];

- elydelacruz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- d3noob · Accepted Answer

如果你正在使用Chrome浏览器，可能会由于跨域安全限制导致无法正确打开文件。尝试使用Firefox浏览器查看是否存在该问题（它可能会让您正确加载文件）。

如果是这个问题，您需要安装类似WAMP（如果您正在运行Windows）的本地Web服务器，或按照此处维基页面上的说明操作：https://github.com/mbostock/d3/wiki 祝你好运。