尝试使用强制布局显示图形时出现问题。我使用两个csv文件,一个用于顶点,一个用于边缘。我不确定,但我认为由于d3.csv方法是异步的,并且我使用其中两个,我需要将一个插入另一个以避免"并发"问题(最初我试图两次单独调用d3.csv,我遇到了麻烦)。
我的csv的结构如下:
对于边缘:
source,target
2,3
2,5
2,6
3,4
对于节点:
index,name
1,feature1
2,feature2
3,feature3
我最初的尝试是:
// create the force layout
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var node, linked;
// we read the edges
d3.csv("csvEdges.csv", function(error, data) {
edg = data;
// we read the vertices
d3.csv("csvVertices.csv", function(error2, data2) {
ver = data2;
force.nodes(data2)
.links(data)
.start();
node = svg.selectAll(".node")
.data(data2)
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 12)
.style("fill", function(d) {
return color(Math.round(Math.random()*18));
})
.call(force.drag);
linked = svg.selectAll(".link")
.data(data)
.enter()
.append("line")
.attr("class", "link");
force.on("tick", function() {
linked.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; });
});
但我明白了:
"TypeError: Cannot call method 'push' of undefined."
我不知道问题是什么;我认为这与推动链接有关。我读到这个问题可能与d3如何匹配节点的链接有关。对象(在这种情况下,我的节点有两个字段)。所以我尝试了下面的内容(我在这里看到了其他问题):
// we read the edges
d3.csv("csvEdges.csv", function(error, data) {
edg = data;
// we read the vertices
d3.csv("csvVertices.csv", function(error2, data2) {
ver = data2;
force.nodes(data2)
.start();
//.links(data);
var findNode = function(id) {
for (var i in force.nodes()) {
if (force.nodes()[i]["index"] == id) return force.nodes()[i]
};
return null;
};
var pushLink = function (link) {
//console.log(link)
if(findNode(link.source)!= null && findNode(link.target)!= null) {
force.links().push ({
"source":findNode(link.source),
"target":findNode(link.target)
})
}
};
data.forEach(pushLink);
[...]
但是在这种情况下,我得到了一堆:
Error: Invalid value for <circle> attribute cy="NaN"
我不知道这种情况下的问题是什么!
答案 0 :(得分:0)
我看到这样做的方法是使用queue.js对函数进行排队,如Elijah Meeks在“D3.js in Action”一书中所述。第6章的示例代码在Manning网站上,见清单6.7。 (并购买这本书,它非常好)这里的基本结构稍微适应了你的用例:
lifelog