Kann JSON-Datei nicht laden

Ich lege meine HTML-Datei und JSON-Datei unter dem gleichen Ordner. Wenn ich meinen Code ausführe, kann er die JSON-Datei nicht laden. Hier ist die HTML-Datei:Kann JSON-Datei nicht laden

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
 
    pageEncoding="ISO-8859-1"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
    <body> 
 
    
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 

 
    <script type="text/javascript"> 
 

 
var nodes1; 
 
d3.json("test.json", function(error, data){ 
 
\t nodes1 = data; 
 
}); 
 

 
var edges1 = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } , 
 
    \t \t \t { source : 0 , target: 3 } , { source : 1 , target: 4 } , 
 
    \t \t \t { source : 1 , target: 5 } , { source : 1 , target: 6 } , 
 
    \t \t \t { source : 0 , target: 4 } , { source : 4 , target: 0 }]; \t 
 

 
     \t myfunction(nodes1, edges1); 
 
     function myfunction(nodes, edges){ 
 
     \t 
 
     \t var width = 900; 
 
     \t \t var height = 400; 
 
     \t \t 
 
     \t \t 
 
     \t \t var svg = d3.select("body") 
 
     \t \t \t \t \t .append("svg") 
 
     \t \t \t \t \t .attr("width",width) 
 
     \t \t \t \t \t .attr("height",height); 
 
     \t \t 
 
     \t \t var force = d3.layout.force() 
 
     \t \t \t \t .nodes(nodes) \t 
 
     \t \t \t \t .links(edges) \t 
 
     \t \t \t \t .size([width,height]) \t 
 
     \t \t \t \t .linkDistance(150) \t 
 
     \t \t \t \t .charge(-400); \t 
 

 
     \t \t force.start(); \t 
 

 
     \t \t console.log(nodes); 
 
     \t \t console.log(edges); 
 
     \t \t 
 
     \t \t \t \t 
 
     \t \t var svg_edges = svg.selectAll("line") 
 
     \t \t \t \t \t \t \t .data(edges) 
 
     \t \t \t \t \t \t \t .enter() 
 
     \t \t \t \t \t \t \t .append("line") 
 
     \t \t \t \t \t \t \t .style("stroke","#ccc") 
 
     \t \t \t \t \t \t \t .style("stroke-width",1); 
 
     \t \t 
 
     \t \t var color = d3.scale.category20(); 
 
     \t \t \t \t 
 
     \t \t \t \t \t 
 
     \t \t var svg_nodes = svg.selectAll("circle") 
 
     \t \t \t \t \t \t \t .data(nodes) 
 
     \t \t \t \t \t \t \t .enter() 
 
     \t \t \t \t \t \t \t .append("circle") 
 
     \t \t \t \t \t \t \t .attr("r",20) 
 
     \t \t \t \t \t \t \t .style("fill",function(d,i){ 
 
     \t \t \t \t \t \t \t \t return color(i); 
 
     \t \t \t \t \t \t \t }) 
 
     \t \t \t \t \t \t \t .call(force.drag); 
 

 
    
 
     \t \t var svg_texts = svg.selectAll("text") 
 
     \t \t \t \t \t \t \t .data(nodes) 
 
     \t \t \t \t \t \t \t .enter() 
 
     \t \t \t \t \t \t \t .append("text") 
 
     \t \t \t \t \t \t \t .style("fill", "black") 
 
     \t \t \t \t \t \t \t .attr("dx", 20) 
 
     \t \t \t \t \t \t \t .attr("dy", 8) 
 
     \t \t \t \t \t \t \t .text(function(d){ 
 
     \t \t \t \t \t \t \t \t return d.name; 
 
     \t \t \t \t \t \t \t }); 
 
     \t \t \t \t \t 
 

 
     \t \t force.on("tick", function(){ \t 
 
     \t \t 
 
     \t 
 
     \t \t \t svg_edges.attr("x1",function(d){ return d.source.x; }) 
 
     \t \t \t \t \t .attr("y1",function(d){ return d.source.y; }) 
 
     \t \t \t \t \t .attr("x2",function(d){ return d.target.x; }) 
 
     \t \t \t \t \t .attr("y2",function(d){ return d.target.y; }); 
 
     \t \t \t 
 
    
 
     \t \t \t svg_nodes.attr("cx",function(d){ return d.x; }) 
 
     \t \t \t \t \t .attr("cy",function(d){ return d.y; }); 
 

 

 
     \t \t \t svg_texts.attr("x", function(d){ return d.x; }) 
 
     \t \t \t \t .attr("y", function(d){ return d.y; }); 
 
     \t \t }); 
 
     } \t 
 
     
 
     
 
     </script> 
 
    </body> 
 
</html>

Und hier ist meine JSON-Datei:

[ 
 
\t { name: "www"}, 
 
\t { name: "ddd"}, 
 
\t { name: "sdf"}, 
 
\t { name: "ccc"}, 
 
\t { name: "ads"}, 
 
\t { name: "adh"}, 
 
\t { name: "sdf"} 
 
]

Mein Server ist tomcat 7 und ich verwende Eclipse zu testen mein Code. Ich habe auch Chrome, IE11, Edge, Firefox und geänderte Sicherheitsstrategie verwendet, um meinen Code auszuführen, aber nichts erscheint im Explorer. Kann das denn das falsche Dateiverzeichnis sein? Oder die Methode, die ich zum Laden von JSON-Datei verwende?

Quelle

2016-09-26 Ma Hans

Was ist Ihre Konsole sagen? Insbesondere die Registerkarte Netzwerk. – Marty

'd3.json' ist asynchron - daher werden Sie keine Daten in' nodes1' haben, wenn der Rest des Skripts ausgeführt wird (was sein wird, bevor der d3.json sogar beginnt, Daten zu erhalten, geschweige denn endet) ... 'console. log (nodes); 'loggt wahrscheinlich ** undefined **, wenn Sie sich die Konsole –

nichts anschauen würden. –

als @Jaromanda X in seinem Kommentar erwähnt, Sie json asynchron geladen werden, so dass, wenn Sie myfunction der Wert nodes1 aufrufen noch undefined

es Sie sollten myfunction Aufruf zu json Rückruf bewegen funktioniert:

d3.json("test.json", function(error, data){ 
    nodes1 = data; 
    myfunction(nodes1, edges1); 
});

Quelle

2016-09-26 05:28:37 pwolaq

Es funktioniert immer noch nicht. Nichts wird auf dem Bildschirm angezeigt. Ist es möglich, dass ich den Datentyp von JSON in Array konvertieren muss? PS: wenn ich nur meine Daten in HTML-Datei, könnte es sehr gut funktionieren. –

Danke euch allen helfen! Ich löse das Problem. Ich denke, ich habe zwei Probleme. Einer ist wie @Jaromanda X und @pwolaq sagte, json habe asynchron Probleme, so dass ich Funktionen innerhalb meiner Methode laden muss. Der zweite, der ich GUESS sein könnte, muss ich JSON-Typ in Js-Array konvertieren, ich bin mir noch nicht sicher. Ich benutze schließlich eine andere Methode, um Daten von Json zu laden. Hier ist meine Methode:

var request = new XMLHttpRequest(); 
 
\t request.open('GET', 'test.json'); 
 
\t request.onreadystatechange = function(){ 
 
\t \t if((request.readyState == 4)&& (request.status == 200)){ 
 
\t \t \t var nodes1 = JSON.parse(request.responseText); 
 
\t \t \t myfunction(nodes1); 
 
\t \t } 
 
\t }; 
 
\t request.send();

Quelle

2016-09-26 06:02:19

Kann JSON-Datei nicht laden

Antwort

Verwandte Themen