Question

我把我的html文件和json文件放在同一个文件夹下。当我运行我的代码时，它无法加载json文件。这是html文件：

<%@ 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){
	nodes1 = data;
});

var edges1 = [  { source : 0  , target: 1 } , { source : 0  , target: 2 } ,
    			{ source : 0  , target: 3 } , { source : 1  , target: 4 } ,
    			{ source : 1  , target: 5 } , { source : 1  , target: 6 } ,
    			{ source : 0  , target: 4 } , { source : 4  , target: 0 }];	

        	myfunction(nodes1, edges1);
        function myfunction(nodes, edges){
        	
        	 var width = 900;
     		var height = 400;
     		
     		
     		var svg = d3.select("body")
     					.append("svg")
     					.attr("width",width)
     					.attr("height",height);
     		
     		var force = d3.layout.force()
     				.nodes(nodes)	
     				.links(edges)	
     				.size([width,height])	
     				.linkDistance(150)	
     				.charge(-400);	

     		force.start();	

     		console.log(nodes);
     		console.log(edges);
     		
     				
     		var svg_edges = svg.selectAll("line")
     							.data(edges)
     							.enter()
     							.append("line")
     							.style("stroke","#ccc")
     							.style("stroke-width",1);
     		
     		var color = d3.scale.category20();
     				
     					
     		var svg_nodes = svg.selectAll("circle")
     							.data(nodes)
     							.enter()
     							.append("circle")
     							.attr("r",20)
     							.style("fill",function(d,i){
     								return color(i);
     							})
     							.call(force.drag);

    
     		var svg_texts = svg.selectAll("text")
     							.data(nodes)
     							.enter()
     							.append("text")
     							.style("fill", "black")
     							.attr("dx", 20)
     							.attr("dy", 8)
     							.text(function(d){
     								return d.name;
     							});
     					

     		force.on("tick", function(){	
     		
     	
     			 svg_edges.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; });
     			 
  
     			 svg_nodes.attr("cx",function(d){ return d.x; })
     			 		.attr("cy",function(d){ return d.y; });


     			 svg_texts.attr("x", function(d){ return d.x; })
     			 	.attr("y", function(d){ return d.y; });
     		});
        }	
       
        
        </script>
    </body>  
</html>

这是我的json文件：

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

我的服务器是tomcat 7，我使用eclipse来测试我的代码。我还使用Chrome，IE11，Edge，firefox和更改安全策略来运行我的代码，但是资源管理器上没有任何内容。这可能是因为错误的文件目录？或者我用来加载json文件的方法？

Answer 1

正如@Jaromanda X在他的评论中提到的那样，你是异步加载json所以当你调用myfunction时nodes1的值仍为undefined

要使其工作，您应该将myfunction调用移至json回调：

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

Answer 2

谢谢大家的帮助！我解决了这个问题。我想我有两个问题。一个像@Jaromanda X和@pwolaq说，json有异步问题，所以我必须在我的方法中加载函数。第二个我GUESS可能我必须将json类型转换为js数组，我仍然不确定它。我最后使用另一种方法从json加载数据。这是我的方法：

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

无法加载json文件

2 个答案: