D3不会加载树状图
D3 will not load Tree Map
我正在尝试使用D3和JSON文件来创建和显示树映射。非常简单,只是为了好玩而尝试D3。然而,在我把tree.js
和运行脚本放在一起之后,我会得到一个空白页面。控制台显示
XMLHttpRequest cannot load file:///Users/aczre/Desktop/d3TestApp/shreleases.json.
Cross origin requests are only supported for HTTP.
Uncaught TypeError: Cannot read property 'children' of null d3.v2.js:6081
d3_layout_hierarchyChildren d3.v2.js:6081
recurse d3.v2.js:5990
hierarchy d3.v2.js:6033
tree d3.v2.js:6384
object.nodes d3.v2.js:6074
(anonymous function) tree.js:17
d3.json d3.v2.js:514
ready d3.v2.js:504
d3.xhr.req.onreadystatechange d3.v2.js:497
d3.xhr d3.v2.js:500
d3.text d3.v2.js:510
d3.json d3.v2.js:513
(anonymous function) tree.js:16
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 d3.v2.js:500
d3.xhr d3.v2.js:500
d3.text d3.v2.js:510
d3.json d3.v2.js:513
(anonymous function) tree.js:16
不确定我做错了什么。。。这是我的tree.js
var width = 960,
height = 2000;
var tree = d3.layout.tree()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40, 0)");
d3.json("shreleases.json", function(json) { // Line 16
var nodes = tree.nodes(json);
var link = vis.selectAll("path.link")
.data(tree.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});
我试着坚持D3网站上列出的例子,https://github.com/mbostock/d3/wiki/Gallery但我不确定我是否完全理解语法。
在chrome中,您可以告诉它允许本地文件访问,这样您就不需要服务器,例如
"C:''Program Files(x86)''Google''Chrome''Application''Chrome.exe"-允许从文件访问文件
您可能需要从web服务器请求JSON文件。错误消息抱怨它不是http请求,因为您的文件存储在本地。
如果你有JSON文件,你可以把它放到你的网络主机上。或者,您可以使用类似WAMP的东西创建一个本地服务器设置。
相关文章:
- 将基本CSV数据加载到D3
- d3转换从页面加载开始,而不是从模式弹出加载开始
- D3.js:通过Force Layout从JSON文件加载多个网络
- D3.js可以't加载json文件
- 我能在d3中加载.gml吗
- 定位D3 SVG画布x/y和加载时的缩放级别
- d3.js继续条件加载数据
- 将csv文件加载到d3中,而不发送到服务器
- 将形状加载到d3中
- D3.csv未加载csv文件
- d3.js和加载具有特殊字符的数据
- 如何从外部将json加载到D3应用程序
- 将JSON从rails控制器加载到javascript文件中的d3.dedefe()函数
- 创建加载 d3.js 的浮动图像
- 加载D3 Url与API密钥
- 在D3之前加载D3依赖
- 缓慢加载d3 / c3图表
- 未定义加载D3圆包时的功能
- 加载内部 JSON 数据,而不是从外部资源/文件加载 d3 中的旭日
- 为什么这个json文件不能在Meteor [ubuntu]中加载d3 ?