D3.js不起作用的非常简单的教程示例
Very simple tutorial example of D3.js not working
我是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"]
}
]
如果您使用Chrome,由于跨域安全限制,它可能会阻止您正确打开文件。试试Firefox看看是否是这样(它可能会让你正确加载文件)。
如果这是问题所在,您将需要安装像WAMP这样的本地web服务器(如果您运行的是Windows),或者按照此处wiki页面上的说明进行操作:https://github.com/mbostock/d3/wiki
祝好运
您是否检查了浏览器控制台以查看您的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请求成功。
好吧,d.name和d.status都是数组,如果你想显示它们的内容,或者yo应该访问这些数组的0索引值,它们应该只是字符串;即d.name[0]+':'+d.status[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"
}
]
- JQuery:向多个匹配结果添加换行符的最简单方法
- 访问对象的最简单方法'的单独财产
- GM_xmlhttprequest问题&某个地方的教程
- AngularJS-简单的教程不起作用
- 调用影子原型方法的更简单/更好的方法
- 什么'这是使用jQuery将一些文本锚定到外部链接的最简单方法
- 什么是处理JavaScript的最简单的网络抓取工具
- 实施会员系统的最简单方法是什么
- 出错时更改文本字段边框的最简单方法
- JavaScript:获取第一个月前 6 个月的日期的最简单方法
- 一个用javascript创建非常基本的模拟的教程
- 在CreateJS中加载视频的最简单方法
- 对于 MEAN 堆栈 docker 容器来说,在 OS X 和 DigitalOcean 上具有相同配置的最简单设置是什
- 使用JavaScript过滤从网页复制的文本的最简单方法
- 是否可以将PHP的一个简单片段重新编码为javascript
- 创建在Javascript和PHP之间使用的唯一代码的最简单方法
- 使用JS找出字符串中字符重复的最简单方法是什么
- 使选择框在URL中使用变量重新加载页面的最简单方法
- 有没有关于如何创建一个简单的外部javascript小部件的教程
- D3.js不起作用的非常简单的教程示例