D3.js的非常简单的教程示例不起作用
[英]Very simple tutorial example of D3.js not working
问题描述
I'm kind of new to D3.js. 
我是D3.js的新手。 I'm reading Getting Started with D3 by Mike Dewar. 我正在阅读Mike Dewar的D3入门 。 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? 这里的代码出了什么问题？
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"]
}
]
4 个解决方案
解决方案1
5 已采纳 2013-02-06 16:58:55
If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. 如果您使用的是Chrome，则可能会因为跨域安全限制而无法正常打开文件。 Try Firefox to see if that's the case (it will probably let you load the file correctly). 尝试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 如果这是问题，您将需要安装本地Web服务器，如WAMP（如果您正在运行Windows）或按照维基页面上的说明操作： https ： //github.com/mbostock/d3/wiki
Good luck 祝好运
解决方案2
1 2013-02-06 05:44:40
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 .json to .txt or .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-扩展 ，然后XHR请求成功。
解决方案3
0 2013-02-07 16:07:44
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; 那么d.name和d.status都是数组，如果你想显示它们的内容或者你应该访问那些数组的0索引值，它应该只是字符串; Ie, d.name[0] + ':' + d.status[0]; 即，d.name [0] +'：'+ d.status [0];
解决方案4
0 2013-02-13 23:18:28
It might be your JSON. 它可能是你的JSON。 I did the same exercise, and it worked fine. 我做了同样的练习，但效果很好。 Here is my js(I appended to a div, not body). 这是我的js（我附加到div，而不是身体）。 I'm running a local web server. 我正在运行本地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"
}
]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.