I am using swimlane vertical (Swim Lanes (vertical)) and trying to create the diagram with dynamically by passing dynamic data .
I am able to get the data but the links for some blocks are very close to the toplane (please see in image )
border and hence it is not very clear which boxes connects to what , is it possible to add a spacing or padding between lane names and lanes
Yes, that should be possible, but I don’t know how you are doing the layout, so I cannot provide any suggestions.
But if you don’t mind some basic questions about your assumptions:
- people are supposed to swim in their lanes, not cross them all the time. So I would think you should be implementing “bands”, not “lanes”. Layer Bands using a Background Part
- what should happen when the user collapses what looks to me like a “band”?
for our requirement , we need like to specify which lane a specific box should be present , we find this option is available only in lane not in bands , which is why we went with lanes not bands
for our use case , we don’t need collapse option
Lanes work fine except for the part of adding a space in the top
OK, could you please share enough information with us so that we can reproduce the way that you are doing layouts?
BTW, here’s a LayeredDigraphLayout using bands, where you need to specify the desired band for each node by setting the data.band property to refer to the name of the band. BandedLDLayout
If you start from that sample, you’ll want to set HORIZONTAL to true.
Below is the sample data we have data array
{
“key”: “Manufacturer”,
“text”: “Manufacturer”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “H (IE)”,
“group”: “Manufacturer”,
“loc”: “80 65”
}, {
“key”: “SDD”,
“text”: “SDD”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “H (PT (2))”,
“group”: “SDD”,
“loc”: “160 65”
}, {
“key”: “GL”,
“text”: “GL”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “C (US)”,
“group”: “GL”,
“loc”: “240 65”
}, {
“key”: “PP”,
“text”: “PP”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “P (US)”,
“group”: “PP”,
“loc”: “320 65”
}, {
“key”: “SP”,
“text”: “SP”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “P (US (2))”,
“group”: “SP”,
“loc”: “400 65”
}, {
“key”: “SSKP”,
“text”: “SSKP”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “PLR (CH)”,
“group”: “SSKP”,
“loc”: “480 65”
}, {
“key”: “FLR (CH)”,
“group”: “SSKP”,
“loc”: “480 105”
}, {
“key”: “FLR (CH (2))”,
“group”: “SSKP”,
“loc”: “480 145”
}, {
“key”: “FLR (CH (3))”,
“group”: “SSKP”,
“loc”: “480 185”
}, {
“key”: “Pl (CH (2))”,
“group”: “SSKP”,
“loc”: “480 225”
}, {
“key”: “Virtual”,
“text”: “Virtual”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “HE (PT)”,
“group”: “Virtual”,
“loc”: “560 65”
}, {
“key”: “Markets”,
“text”: “Markets”,
“isGroup”: true,
“category”: “Lane”,
“group”: “Map”,
“color”: “white”
}, {
“key”: “HK, TW”,
“group”: “Markets”,
“loc”: “850 70”
}, {
“key”: “Japan”,
“group”: “Markets”,
“loc”: “850 110”
}, {
“key”: “NA”,
“group”: “Markets”,
“loc”: “850 150”
}, {
“key”: “EU, APAC, LATAM, EEMEA”,
“group”: “Markets”,
“loc”: “850 190”
}, {
“key”: “Map”,
“text”: “Map”,
“isGroup”: true,
“category”: “Pool”
}
and below is the sample data for link array
{
“to”: “Canada (NA)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “PLR (CH)”,
“from”: “P (US)”
}, {
“to”: “HK, TW”,
“from”: “PLR (CH)”
}, {
“to”: “FLR (CH)”,
“from”: “H (IE)”
}, {}, {
“to”: “FLR (CH (2))”,
“from”: “H (PT (2))”
}, {}, {
“to”: “FLR (CH (3))”,
“from”: “C (US)”
}, {
“to”: “Japan”,
“from”: “FLR (CH (3))”
}, {
“to”: “H (IE)”,
“from”: “”
}, {}, {
“to”: “CStone (China)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “FLR (CH (2))”,
“from”: “FLR (CH)”
}, {}, {
“to”: “C (US)”,
“from”: “FLR (CH (2))”
}, {}, {
“to”: “P (US (2))”,
“from”: “P (US)”
}, {
“to”: “NA”,
“from”: “P (US (2))”
}, {
“to”: “RoW (excl. China, Macau, Hong Kong, Taiwan)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “H (PT (2))”,
“from”: “HE (PT)”
}, {}, {
“to”: “P (US)”,
“from”: “C (US)”
}, {}, {
“to”: “Chugai (Japan)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “Pl (CH (2))”,
“from”: “P (US (2))”
}, {
“to”: “EU, APAC, LATAM, EEMEA”,
“from”: “Pl (CH (2))”
}, {
“to”: “HE (PT)”,
“from”: “”
}, {}, {
“to”: “EU (EU)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “Canada (NA)”,
“from”: “P (US (2))”
}, {}, {
“to”: “US (NA)”,
“from”: “Pl (CH (2))”
}, {}, {
“to”: “CStone (China)”,
“from”: “P (US (2))”
}, {}
Please let me know if you need any other information .
Right now we use swim lanes vertical .
Is there any reason why you recommend us to use BandedLDLayout instead of swimlane vertical which we use currently ? , as I said we are able to achieve our requirements with swimlane except for adding a space in top between lanes and actual boxes ?
Thanks for the data. Have you made any changes to the group templates that are used by the SwimLanes (vertical) sample or any of the functions that they depend upon?
You’ll note that the SwimLanes samples have each Group/lane use its own layout.
But the banded layout samples and SwimLaneLayout extension/sample ( Beat Paths with Lanes for Divisions Using SwimLaneLayout ) each use a single layout for all of the nodes and links.
The answer to your question is to change the Placeholder.padding in the “Lane” Group template. It is of type Margin, in case you want different margins on different sides.
But I really am surprised that you want those nodes in each lane/Group to be laid out in a column, without any regard of the links connecting them with nodes in other lanes.
Thanks for your response , it worked .
We are building a logic to make sure we are placing our lanes according to the connection to the nodes they are connecting with .
One I still see is , connecting lines merging with each other causing a confusion , can that be avoided ? please see Attached image
Yes, if you used BandedLDLayout to apply to all of the nodes and links, it would have a chance to make such improvements. Each swim lane having its own independent layout won’t permit that.