在我的项目中,我想使用d3.js强制布局和以下数据绘制图形。
Nodes --> [{"name":"http://dbpedia.org/ontology/abstract","type":"s","group":0},
{"name":"http://www.w3.org/2002/07/owl#DatatypeProperty","type":"o","group":1},
{"name":"http://dbpedia.org/ontology/wikiPageID","type":"s","group":2},
{"name":"http://www.w3.org/2002/07/owl#backwardCompatibleWith","type":"s","group":4},
{"name":"http://www.w3.org/2002/07/owl#OntologyProperty","type":"o","group":5},
{"name":"http://dbpedia.org/ontology/birthDate","type":"s","group":6},
{"name":"http://dbpedia.org/ontology/deathDate","type":"s","group":8},
{"name":"http://dbpedia-live.openlinksw.com/sparql","type":"s","group":10},
{"name":"http://www.w3.org/ns/sparql-service-description#Service","type":"o","group":11},
{"name":"http://www.w3.org/2002/07/owl#incompatibleWith","type":"s","group":12},
{"name":"http://www.w3.org/2002/07/owl#priorVersion","type":"s","group":14},
{"name":"http://dbpedia.org/ontology/wikiPageRevisionID","type":"s","group":16},
{"name":"http://www.w3.org/2002/07/owl#imports","type":"s","group":18}]
Links --> [{"source":0,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":2,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":4,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":6,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":8,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":10,"target":11,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":12,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":14,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":16,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":18,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200}]
这个数据是以这种格式动态编写的。在javascript代码中force.start();函数被称为“无法读取属性'权重'未定义”错误已被抛出。 This相关问题对我没有帮助,所以我可以防止出现此错误。此外,链接数组为空或某些链接已被删除,或者当我使用“miserables.json”作为数据javascript时,以下功能成功。
<script type="text/javascript">
var w = 900,
h = 900;
var color = d3.scale.category10();
var nodes = eval('(' + '${graphDrawer.nodes}' + ')');
var links = eval('(' + '${graphDrawer.links}' + ')');
var vis = d3.select("#activationGraphDiv").append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.gravity(.05)
.linkDistance(100)
.charge(-200)
.size([w, h]);
var link = vis.selectAll("line.link")
.data(links)
.enter().append("svg:line")
.attr("class", "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; });
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node")
.on("mouseover", nodeMouseover)
.on("mouseout", nodeMouseout);
node.append("circle")
.attr("r",10) // Node radius
.style("fill", "white") // Make the nodes hollow looking
.style("stroke-width", 4) // Give the node strokes some thickness
.style("stroke", function(d) { return color(d.group); } ) // Node stroke colors
.call(force.drag);
node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 26)
.attr("dy", ".35em")
.text(function(d) { return d.name });
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("transform", function(d) { return "translate(" + d.x+ "," + d.y+ ")"; });
});
force
.nodes(nodes)
.links(links)
.start();
function nodeMouseover() {
d3.select(this).select("circle").transition()
.duration(250)
.attr("r",function(d){
return 20;
});
d3.select(this).select("text").transition()
.duration(250)
.style("font", "bold 20px Arial")
.attr("fill", "Blue");
}
function nodeMouseout() {
d3.select(this).select("circle").transition()
.duration(250)
.attr("r",function(d){
return 10;
});
d3.select(this).select("text").transition()
.duration(250)
.attr("fill", "Blue")
.style("font", function(d){
return "normal 12px Arial";
});
}
</script>
感谢您的帮助:D