2013-11-11 3 views
1

Я пытаюсь запустить простую программу d3 Javascript для визуализации графика. У меня также есть JSON-файл для этого графика. Чтобы запустить программу, мне сказали, что я должен выполнить следующие шаги:SimpleHTTPServer code 404, message Файл не найден

1- На терминале я перехожу в папку, где находится проект.
2- я вставляю следующую команду: python -m SimpleHTTPServer 8888 &
3- На веб-браузер (Firefox), я добавить это: http://localhost:8888

Когда я делаю третий шаг, терминал показывает мне следующее сообщение об ошибке:

localhost - - [11/Nov/2013 08:07:23] code 404, message File not found 
localhost - - [11/Nov/2013 08:07:23] "GET /D3/sample.json HTTP/1.1" 404 - 

Вот мой HTML-файл для d3 Javascript графика:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<style> 

.node { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

</style> 
<body> 
<p> Paragraph !!! </p> 
<script type="text/javascript" src="d3.v3.js"></script> 
<script> 

var width = 960, 
height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
.charge(-120) 
.linkDistance(30) 
.size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("sample.json", function(error, graph) { 
force 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .start(); 

var link = svg.selectAll(".link") 
    .data(graph.links) 
    .enter().append("line") 
    .attr("class", "link") 
    .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", 5) 
    .style("fill", function(d) { return color(d.group); }) 
    .call(force.drag); 

node.append("title") 
    .text(function(d) { return d.name; }); 

force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 
}); 
}); 

</script> 
</body> 
</html> 

кажется, что файл JSON sample.json не может быть прочитан как показано выше. Может кто-нибудь, пожалуйста, помогите мне, как запустить эту программу и получить файл json, используя команду, указанную выше. Если я добавлю заголовок и абзацы в этом HTML-файле, они появятся, но не смогут отобразить график. Есть ли проблема с расположением файла JSON или что-то не так с файлом d3.v3.js? Благодарим вас за помощь.

`

+0

Я столкнулся с подобной ошибкой 404 и по какой-то причине сервер не принял мой фактический путь к каталогу. Поэтому я удалил путь и поместил файлы библиотеки .js в тот же каталог, где находился html-файл. Это сработало. – noobninja

ответ

0

Из того, что я понимаю, вы простой сервер питона настройки в каталоге и в этом каталоге есть HTML-файл, который дисплей в браузере. Однако, когда вы пытаетесь запустить js-код и загрузите json-файл, вы получите ошибку 404.

Ошибка в том, что она ищет json-файл в каталоге под названием D3, однако код ищет json в корневом каталоге. Попробуйте изменить линию

D3.json("sample.json", function(error, graph)

в

d3.json("D3/sample.json", function(error, graph).

Кроме того, внутри вызова функции места console.log(graph) так:

d3.json("sample.json", function(error, graph) { 
    console.log(graph) 

Это отправить вывод на консоль, так что вы можете проверить, что читается в (извинениями, если вы уже знали, что).

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