Javascript D3强制定向JSON邻接列表
我有一个图形邻接列表,如下所示:Javascript D3强制定向JSON邻接列表,javascript,php,json,d3.js,force-layout,Javascript,Php,Json,D3.js,Force Layout,我有一个图形邻接列表,如下所示: { nodes: [ { "id": 1, "label": "Mark },...], edges: [ { "source": 1, "target": 2 },....] } 边使用节点的id 我一直在使用PHP在客户端回显这个列表 D3无法从文件加载我的JSON。 所以我尝试手动解析它: var width = window.innerWidth, height = window.i
{
nodes: [
{
"id": 1,
"label": "Mark
},...],
edges: [
{
"source": 1,
"target": 2
},....]
}
边使用节点的id
我一直在使用PHP在客户端回显这个列表
D3无法从文件加载我的JSON。
所以我尝试手动解析它:
var width = window.innerWidth,
height = window.innerHeight;
var color = d3.scale.category20();
var force = d3.layout.force()
.linkDistance(40)
.linkStrength(2)
.charge(-120)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var nodes = [], links = [];
d3.json( null, function( error )
{
JSONData.nodes.forEach( function(node)
{
nodes.push( node );
});
JSONData.edges.forEach( function(edge)
{
links.push({source: edge.source, target: edge.target});
});
force.nodes(nodes)
.links(links)
.start();
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("fill", "none")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", "#4682B4" )
.call(force.drag);
node.append("title").text(function(d) { return d.label; });
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; });
});
});
然而,我能看到的只是节点,而不是边。
我添加了一个CSS文件,其中包含:
.node {
stroke: #4682B4;
stroke-width: 1.5px;
}
.link {
stroke: #ddd;
stroke-width: 1.5px;
}
但是没有用。
有什么办法解决这个问题吗?您需要使用:
.enter().append("line")
而不是
.enter().append("path")
(可能还需要更改一些其他属性,以便它们对应于行,而不是路径)
或者,你可以画一些更复杂的路径,而不是直线,但我认为在你的情况下,这将是一个过度的杀伤力
编辑:
我刚刚发现了两个相关且有趣的问题:
-描述在force布局中显示链接时出现的另一种问题-确保没有遇到类似的障碍
-如果你决定做类似的事情,一个人试图画曲线而不是线
但希望这些答案和评论中的提示足以让你得到你想要的。恐怕它仍然无法产生任何台词。保存链接的数组是否需要引用节点ID或节点数组中的节点索引?文档()似乎指出,应该使用节点数组的索引而不是ID来初始化链接。希望您已经解决了这个问题。你现在能完全解决你的问题吗?不,我已经放弃了,使用了Sigma.js。无论如何,谢谢你的帮助!