javascript D3.js 不工作的非常简单的教程示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14721945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Very simple tutorial example of D3.js not working
提问by
I'm kind of new to D3.js. I'm reading Getting Started with D3by Mike Dewar. I tried the very first example in the book, and it doesn't work. I've been tearing my hear out over this. What is wrong with my code here?
我对 D3.js 有点陌生。我正在阅读Mike Dewar 的D3 入门。我尝试了书中的第一个示例，但它不起作用。我一直在为这件事伤心。我这里的代码有什么问题？
In the <head>section:
在该<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>
In the <body>:
在<body>：
<script>
d3.json("flare.json", draw);
</script>
And the JSON file:
和 JSON 文件：
[
{
"status": ["GOOD SERVICE"],
"name": ["123"],
"url": [null],
"text": ["..."],
"plannedworkheadline": [null],
"Time": [" 7:35AM"],
"Date": ["12/15/2011"]
}
]
采纳答案by d3noob
If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. Try Firefox to see if that's the case (it will probably let you load the file correctly).
如果您使用的是 Chrome，由于跨域安全限制，它可能会阻止您正确打开文件。尝试使用 Firefox 看看是否是这种情况（它可能会让您正确加载文件）。
If that is the problem, you will want to install a local web server like WAMP (if you're running Windows) or follow instructions on the wiki page here: https://github.com/mbostock/d3/wiki
如果这是问题所在，您将需要安装 WAMP 等本地 Web 服务器（如果您运行的是 Windows）或按照此处 wiki 页面上的说明进行操作：https: //github.com/mbostock/d3/wiki
Good luck
祝你好运
回答by mg1075
Have you checked your browser console to see if your XHR request was successful?
您是否检查过浏览器控制台以查看您的 XHR 请求是否成功？
When I attempt to run the code on my machine, with a local version of d3 (v3) in VS 2012 Express, the XHR request comes back with an error message:
当我尝试在我的机器上使用 VS 2012 Express 中的本地版本 d3 (v3) 运行代码时，XHR 请求返回一条错误消息：
HTTP Error 404.3 - Not Found
HTTP 错误 404.3 - 未找到
However, when I change the extension of the "flare" file from .jsonto .txtor .js, as alluded to here: https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension, then the XHR request succeeds.
但是，当我将“flare”文件的扩展名从.json更改为.txt或.js 时，正如此处提到的：https: //serverfault.com/questions/39989/iis-cant-serve-certain-file- extension，则 XHR 请求成功。
回答by elydelacruz
Well d.name and d.status are both arrays and should be just strings if you want to show their contents or yo should be accessing the 0 index value of those arrays; I.e., d.name[0] + ':' + d.status[0];
那么 d.name 和 d.status 都是数组，如果你想显示它们的内容，应该只是字符串，或者你应该访问这些数组的 0 索引值；即，d.name[0] + ':' + d.status[0];
回答by Ken Penn
It might be your JSON. I did the same exercise, and it worked fine. Here is my js(I appended to a div, not body). I'm running a local web server.
它可能是您的 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';
}
});
}
and here is my JSON:
这是我的 JSON：
[
{
"name": "123",
"status": "DELAYS",
"text": "delay text",
"Date": "12/08/2012",
"Time": " 1:03PM"
}
]
