Strange edge routing behavior
Closed this issue · 11 comments
Hello! First, I want to thank everyone involved in building KLayJS and KLayJS-D3! I've been playing around with it for the last few days, and I can already see how powerful it is.
I have a question that may be answered with a simple change to the graph options, but I'm not sure which ones.
The graph above looks fine, but when I try to add another edge between n4 and n6, I get this behavior:
I'm using the following options:
.options({
layoutHierarchy: true,
direction: "DOWN",
edgeRouting: "ORTHOGONAL",
nodeLayering: "NETWORK_SIMPLEX",
nodePlace: "BRANDES_KOEPF",
fixedAlignment: "NONE",
crossMin: "LAYER_SWEEP",
algorithm: "de.cau.cs.kieler.klay.layered"
});
Here's the data: https://gist.github.com/semerj/51f6f6596241d1306da9
I'd appreciate any guidance for fixing the bent edges. Thanks in advance!
Hi, thanks. This doesn't look right. Can you share the rest of the code in a gist?
This seems to be a Problem with applying the bendpoint-positions of the hierachical edges. The bendpoints of hierarchical edges are relative to the parent of the edge's source node, in this case, "n2". If you add the position of n2 to the bendpoints, it might solve the problem.
Actually, it's a bug in the js code. I'll fix it within the next days. Would it be ok for you if I add your code as another example?
@uruuru yes, you can definitely add it as an example. Thanks again for the help!
I was also curious if it's possible to, say, specify the x or y position (but not both) of a particular node(s) in the data, and let the layout algorithm determine the remaining position. I'm trying to acheive a "contemporary"/bidirectional relationship between two nodes like this:
I'm not completely sure what you mean. We support some very basic interactive layout. For instance, you can configure the algorithm to keep 69 left of 113. Would that help?
Also, I added your working example.
Yes, that would help! I just want 2 or more nodes in particular to be on the same plane using the same layout as my original example above, but I don't necessarily have the exact coordinates for all the nodes in my graph.
I just tried out the new update on the original data and it looks great, but when I applied it to a much larger graph, the edges look offset.
I pushed another fix. Please give it a try and let me know if it works.
Regarding your other question you can give the following two layout options a try. More information on how they work can be found in our wiki.
crossMin: "INTERACTIVE",
nodeLayering: "INTERACTIVE"
For them to work properly, you have to pass x and y coordinates for the nodes. crossMin will try to preserve the order in x dimension and nodeLayering will try to preserve order in y dimension (in case of a layout direction of DOWN). Try them separately as well.
Works like a charm, @uruuru! 👌
I'm in the process of integrating the interactive options, so I'll report back soon.
Update: I tried using the nodeLayering: "INTERACTIVE" option since I'm just trying to preserve the y dimension, but my x,y coordinates aren't being applied. Here's a minimal JSON file:
{
"id": "root",
"x": 0,
"y": 0,
"children": [{
"id": "n1",
"labels": [ { "text": "n1" } ],
"width": 10,
"height": 10,
"x": 24,
"y": 12
},{
"id": "n4",
"labels": [ { "text": "n4" } ],
"width": 10,
"height": 10,
"x": 25,
"y": 176
},{
"id": "g0",
"labels": [ { "text": "g0" } ],
"width": 10,
"height": 10,
"x": 12,
"y": 47,
"children": [{
"id": "n2",
"labels": [ { "text": "n2" } ],
"width": 10,
"height": 10,
"x": 20,
"y": 99
},{
"id": "n3",
"labels": [ { "text": "n3" } ],
"width": 10,
"height": 10,
"x": 40,
"y": 99
}]
}],
"edges": [{
"id": "e0",
"source": "n1",
"target": "n2"
},{
"id": "e1",
"source": "n1",
"target": "n3"
},{
"id": "e2",
"source": "n2",
"target": "n3"
},{
"id": "e3",
"source": "n2",
"target": "n4"
},{
"id": "e4",
"source": "n3",
"target": "n4"
}]
}