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"]
}
]
4

4 回答 4

5

如果您使用的是 Chrome，由于跨域安全限制，它可能会阻止您正确打开文件。试试 Firefox 看看是不是这样（它可能会让你正确加载文件）。

如果这是问题所在，您将需要安装 WAMP 之类的本地 Web 服务器（如果您运行的是 Windows）或按照此处 wiki 页面上的说明进行操作：https ://github.com/mbostock/d3/wiki

祝你好运

于 2013-02-06T16:58:55.903 回答
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 请求成功。

于 2013-02-06T05:44:40.210 回答
0

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

于 2013-02-07T16:07:44.873 回答
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"
        }
]
于 2013-02-13T23:18:28.200 回答