我有用于显示链接分析的D3 API，即某些数据相互连接。
在我的api中，我可以管理它，当我编写api时，将它们以jsp文件中的硬编码形式写入它们时，就会显示出这种关系。
但是现在我必须使用以下命令从外部json文件加载数据，d3.json("Link.json",error,data)但是当我这样做时，该页面确实向我显示了anythihg。
这是我的代码，我要发布我已完成的工作以及正在尝试执行的工作...
<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
/* CSS Document */
.link10 {
stroke: #000;
stroke-width: 2px;
}
.link1 {
stroke: #000;
stroke-width: 2px;
}
.nodetext {
pointer-events: none;
}
.node.type1 {
fill: #800000;
}
.node.type4 {
fill: #000000;
stroke: #1695A3;
stroke-width: 3px;
}
.node.type5 {
fill: #0000A0;
size: 20px;
}
.node.type7 {
fill: #008000;
size: 40px;
}
image.circle {
cursor: pointer;
}
.fadein {
display: none;
font-size: 20px;
}
.rectD {
background-color: #000000;
width: 70px;
height: 30px
}
.rectL {
background-color: #000000;
width: 90px;
height: 30px
}
</style>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script>
var data = {
"nodes" : [ {
"name" : "JEET",
"full_name" : "Yahoo",
"type" : 4,
"slug" : "www.yahoo.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "SATISH",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "RAHUL",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name": "DANIEL",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "Offnet",
"full_name":"Yandex",
"type":5,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Onnet",
"full_name":"Yandex",
"type":7,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Desc4",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "SHYAM",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "PETER",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "ALEX",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "MURFY",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "JENIFER",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "Subho",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "abc",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "jfyh",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "flid",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "gerard",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "hfud",
"type" : 1,
"slug" : "",
"entity" : "description"
}
],
"links" : [ {
"source" : 0,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 7,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 2,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 3,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 8,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 9,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 10,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 11,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 12,
"value" : 10,
"distance" : 6
}, {
"source" : 4,
"target" : 1,
"value" : 10,
"distance" : 6
},{
"source" : 4,
"target" : 13,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 14,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 15,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 16,
"value" : 10,
"distance" : 6
},
{
"source" : 4,
"target" : 17,
"value" : 10,
"distance" : 6
}
]
};
var w = 560, h = 500, radius = d3.scale.log().domain([0,312000 ])
.range([ "10", "50" ]);
var vis = d3.select("body").append("svg:svg").attr("width", w).attr(
"height", h);
vis.append("marker")
.attr("id", "arrowhead")
.attr("refX", 6 + 2) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
//d3.json(data, function(json) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function(d) {
return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([ w, h ]).start();
var link = vis.selectAll("line.link").data(data.links).enter().append(
"svg:line").attr("class", function(d) {
return "link" + d.value + "";
}).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;
}).attr("marker-end", function(d) {
if (d.value == 10 || d.value==1) {
return "url(#arrowhead)"
} else {
return " "
}
;
});
function openLink() {
return function(d) {
var url = "";
if (d.slug != "") {
url = d.slug
} else if(d.type == 2) {
url = "clients/" + d.slug
} else if(d.type == 3) {
url = "agencies/" + d.slug
}
window.open("//" + url)
}
}
var node = vis.selectAll("g.node").data(data.nodes).enter().append(
"svg:g").attr("class", "node").call(force.drag);
node.append("circle").attr("class", function(d) {
return "node type" + d.type
}).attr("r", function(d) {
if (d.entity == "description") {
return 10
} else {
return 18
}
})
node.append("text").attr("class", function(d) {
return "nodetext title_" + d.name
}).attr("dx", 0).attr("dy", ".35em").style("font-size", "10px").attr(
"text-anchor", "middle").style("fill", "white").text(
function(d) {
if (d.entity != "description") {
return d.name
}
});
node.on("mouseover", function(d) {
if (d.entity == "description") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.name;
}).style("font-size", "15px")
} else if (d.entity == "employee") {
var asdf = d3.select(this);
asdf.select('text').remove();
asdf.append("text").text(function(d) {
return d.prefix + ' ' + d.fst_name
}).attr("class", "nodetext").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
asdf.append("text").text(function(d) {
return d.snd_name
}).attr("class", "nodetext").attr("transform",
"translate(0, 12)").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "15px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "90px").attr("x",
"-46px").attr("y", "-36.5px").attr("xlink:href",
function(d) {
return d.img_hrefL
});
}
if (d.entity == "company") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 28)
} else if (d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 15)
}
});
node.on("mouseout", function(d) {
if (d.entity == "company") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.name;
}).style("font-size", "10px")
} else if (d.entity == "employee") {
///////////////////////////
// CHANGE
///////////////////////////
d3.select(this).selectAll('text').remove();
//d3.select(this).select('text')
d3.select(this).append('text').text(function(d) {
return d.name;
}).style("font-size", "14px").attr("dx", 0).attr("dy", ".35em")
.attr("text-anchor", "middle").style("fill", "white")
.attr("class", "nodetext").transition().duration(300)
.style("font-size", "10px")
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "10px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "70px").attr("x",
"-36px").attr("y", "-36px").attr("xlink:href",
function(d) {
return d.img_hrefD
});
}
if (d.entity == "company" || d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 18)
}
});
node.on("mouseover", fade(.4, "red")).on("mouseout", fade(1));
var linkedByIndex = {};
data.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index]
|| linkedByIndex[b.index + "," + a.index]
|| a.index == b.index;
}
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("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function getConnected(cn, d, level) {
node.each(function(o) {
if(isConnected(d, o) && cn.indexOf(o) == -1) {
cn.push(o);
if(level > 0) getConnected(cn, o, level-1);
};
});
return cn;
}
function fade(opacity,color) {
return function(d) {
node.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
})
.style("stroke", function(o) {
return o.source === d || o.target === d ? color : "#000" ;
});
};
}
//});
</script>
</body>
</html>
这是起作用的代码....
我在这里制作了json文件Link.json
{
"nodes" : [ {
"name" : "JEET",
"full_name" : "Yahoo",
"type" : 4,
"slug" : "www.yahoo.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "SATISH",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "RAHUL",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name": "DANIEL",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "Offnet",
"full_name":"Yandex",
"type":5,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Onnet",
"full_name":"Yandex",
"type":7,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Desc4",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "SHYAM",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "PETER",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "ALEX",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "MURFY",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "JENIFER",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "Subho",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "abc",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "jfyh",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "flid",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "gerard",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "hfud",
"type" : 1,
"slug" : "",
"entity" : "description"
}
],
"links" : [ {
"source" : 0,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 7,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 2,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 3,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 8,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 9,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 10,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 11,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 12,
"value" : 10,
"distance" : 6
}, {
"source" : 4,
"target" : 1,
"value" : 10,
"distance" : 6
},{
"source" : 4,
"target" : 13,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 14,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 15,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 16,
"value" : 10,
"distance" : 6
},
{
"source" : 4,
"target" : 17,
"value" : 10,
"distance" :6
}
]
}
这是我在API中更改的内容以从Link.json加载
d3.json("Link.json", function(error,data) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function(d) {
return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([ w, h ]).start();
这就是我所做的，请帮助我做到这一点..而且我也收到错误信息Uncaught TypeError：无法读取未定义的属性'nodes'..请有人帮助
从文档：
如果发生错误，则解析的JSON是未定义的。
我怀疑您没有将Links.json文件与一起托管index.html。
另外，我认为您data在JSON中使用了额外的包装，一旦浏览器可以获取Link.json文件，这将成为一个问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句