kieler/klayjs-d3

How to evenly spread out large number of ports

Closed this issue · 6 comments

Hi, I have nodes that may have a handful of ports (e.g., 10-20 ports) on a single side (input/output). I would like to know how ensure that ports are evenly spread out. See image below for a canonical example of issue I'm having with large number of ports. The ports are either un-evenly positioned (oval on left in the image) or bunched up together (right oval).

Will the portSpacing attribute help with this, if so how should I be using it? I am using the JavaScript library.
Thanks!

screen shot 2016-10-14 at 2 11 16 pm

What would be the expected result? Even if the ports were spaced evenly (and it's a bit puzzling to me that they aren't, because that's what the algorithm usually tries to do) they wouldn't really be readable because there's not enough space. Would you be okay with the algorithm resizing the nodes appropriately?

@le-cds Thanks for your response. Yes, while readability of port-labels is an issue with large number of ports, I control scaling of fonts through user's zooming behavior on the SVG canvas. I am also using color to represent port types, which provides some indication about port type when text is small/hidden.
Regarding behavior of the algorithm, I experimented with changing the node height, and it seems that the default algorithm tries to fit all ports within a fixed vertical space that is equal to node height. Below is image with modified node height (nodes are taller than in previously posted image).

screen shot 2016-10-17 at 9 38 53 am

What I am trying to achieve is to keep node sizes same, but allow ports to be separated evenly. So an option that allows port drawing area to scale freely based on number of port, without having to change node dimension. Something like below:

screen shot 2016-10-17 at 9 56 44 am

Sorry for the delay, I was on leave.

You should be able to do this by setting the node's de.cau.cs.kieler.portAlignment to CENTER and specifying a reasonable value for de.cau.cs.kieler.portSpacing, e.g. 5.

Thanks. Will try that out..

@uruuru Port spacing solution worked! Thanks. Here's the code and results:

nodeJSON.width = 18;
nodeJSON.height = 10;
nodeJSON ["properties"] = {
     "portConstraints" : "FIXED_SIDE",
     "de.cau.cs.kieler.portAlignment" : "CENTER",
     "de.cau.cs.kieler.portSpacing": 5
};

screen shot 2016-10-27 at 9 49 35 am

Is there working sample with hierarchy ,grouping with ports?