D3.js не может загрузить файл json

Я пытаюсь создать D3.js packed circle diagram.D3.js не может загрузить файл json

Когда я вставляю данные в файл HTML, он отлично работает. Когда я помещаю данные во внешний файл, я ничего не получаю (пустой DOM, без консольных сообщений).

Если вы раскомментируете декларацию данных var и закомментируете d3.json (и соответствующие закрывающие круглые скобки), она отлично работает.

Я вижу файл «2013 Inf-2.json» в браузере и выглядит хорошо сформированным (он проходит проверку jsonlint). Он включает в себя все: от первого "{" до/включая последний "}". Как вложенный пример.

Я запускаю это через httpd (: 80) на OSX Mavericks и пытается отобразить диаграмму в Chrome или Safari.

<!DOCTYPE html> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <script type="text/javascript" src="./d3.v3.min.js"></script> 
    </head> 
<body> 
<div id="chart2"></div> 
<script type="text/javascript"> 
var w = 640, h = 480; 
/* 
var data ={ 
"name" : "root", 
    "children" : [ 
    { 
    "name":"URIN TRACT INFECTION NOS", 
    "size":12196 
    }, 
    { 
    "name":"ACUTE PHARYNGITIS", 
    "size":6679 
    }, 
    { 
    "name":"PNEUMONIA ORGANISM NOS", 
    "size":6452 
    }, 
    { 
    "name":"BRONCHITIS NOS", 
    "size":2636 
    }, 
    { 
    "name":"CELLULITIS OF LEG", 
    "size":2348 
    }, 
    { 
    "name":"OBSTR CHRONIC BRONCHITIS W (ACUTE) EXACERBATION", 
    "size":2203 
    } 
] 
} 
*/ 
var data = d3.json("2013 Inf-2.json", function(error, root) { 

var canvas = d3.select("#chart2") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 

var nodes = d3.layout.pack() 
     .value(function(d) { return d.size; }) 
     .size([w, h]) 
     .nodes(data); 

    // Get rid of root node 
    nodes.shift(); 

    canvas.selectAll("circles") 
     .data(nodes) 
     .enter().append("svg:circle") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", function(d) { return d.r; }) 
     .attr("fill", "green") 
     .attr("stroke", "grey"); 

}); 
</script> 
</html>

источник

2013-12-13 Colin

Вы должны изменить линию

var data = d3.json("2013 Inf-2.json", function(error, root) {

var data = d3.json("2013 Inf-2.json", function(error, data) {

Таким образом, вы просто должны заменить "корень" с "данными"

источник

2013-12-13 22:37:02 cuckovic

Да, я устал это, но все равно получить пустую страницу и консольную консоль. Ссылка API ссылается на то, что «обратный вызов вызывается с двумя аргументами: ошибка, если таковая имеется, и разобранный JSON». https://github.com/mbostock/d3/wiki/Requests#wiki-d3_json – Colin

Он работает, но вы должны поместить его на веб-сервер. Он также может работать следующим образом: var data = d3.json («2013 Inf-2.json», функция (ошибка, данные) { – cuckovic

КВт в Chrome работает, только если вы загружаете его с веб-сервера. работает, если вы открываете его из файловой системы, так что вам не нужен сервер. Попробуйте открыть с помощью Firefox. – cuckovic

D3.js не может загрузить файл json

ответ

Смежные вопросы