D3不會加載樹圖

我想用D3與JSON文件來創建並顯示樹圖。非常簡單，只需嘗試D3即可獲得樂趣。但是，在將我的tree.js放在一起並運行腳本之後，我得到一個空白頁。控制檯說D3不會加載樹圖

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 但我不知道我完全理解語法。

來源

2012-07-12 accraze

您可能需要從Web服務器請求JSON文件。該錯誤消息抱怨說它不是一個http請求，因爲你的文件存儲在本地。

你可以把你的JSON文件放到你的虛擬主機上，如果你有的話。或者你可以使用類似WAMP的東西創建本地服務器設置。

來源

2012-07-12 07:20:41 ChrisCast

真棒的感謝！那就是訣竅 – accraze 2012-07-12 16:05:03

在Chrome中，您可以告訴它允許本地文件訪問，因此您不需要服務器，例如，

「C：\ Program Files文件（x86）的\谷歌\鍍鉻\應用\的chrome.exe」 -ALLOW文件存取的檔案

來源

2013-06-28 10:25:43

D3不會加載樹圖

回答

相關問題