i test the samples Swim Lanes (vertical)
i use the gojs in react
when i hard code the data,it’s work ok;
the data such as:
const nodeList = [
{ “key”: “Pool1”, “text”: “Pool”, “isGroup”: true, “category”: “Pool” },
{ “key”: “Pool2”, “text”: “Pool2”, “isGroup”: true, “category”: “Pool”},
{ “key”: “Lane1”, “text”: “Lane1”, “isGroup”: true, “group”: “Pool1”, “color”: “lightblue”},
{ “key”: “Lane2”, “text”: “Lane2”, “isGroup”: true, “group”: “Pool1”, “color”: “lightgreen” },
{ “key”: “Lane3”, “text”: “Lane3”, “isGroup”: true, “group”: “Pool1”, “color”: “lightyellow” },
{ “key”: “Lane4”, “text”: “Lane4”, “isGroup”: true, “group”: “Pool1”, “color”: “orange”, “size”: “88 269.04863281250005” },
{ “key”: “oneA”,“text”: “oneA”, “group”: “Lane1” },
{ “key”: “oneB”, “text”: “oneB”,“group”: “Lane1”},
{ “key”: “oneC”, “text”: “oneC”,“group”: “Lane1” },
{ “key”: “oneD”, “text”: “oneD”,“group”: “Lane1” },
{ “key”: “twoA”, “text”: “twoA”,“group”: “Lane2” },
{ “key”: “twoB”, “text”: “twoB”,“group”: “Lane2” },
{ “key”: “twoC”, “text”: “twoC”,“group”: “Lane2” },
{ “key”: “twoD”, “text”: “twoD”,“group”: “Lane2” },
{ “key”: “twoE”, “text”: “twoE”,“group”: “Lane2” },
{ “key”: “twoF”, “text”: “twoF”,“group”: “Lane2”},
{ “key”: “twoG”, “text”: “twoG”,“group”: “Lane2”},
{ “key”: “fourA”, “text”: “fourA”,“group”: “Lane4”},
{ “key”: “fourB”, “text”: “fourB”,“group”: “Lane4”},
{ “key”: “fourC”, “text”: “fourC”,“group”: “Lane4”},
{ “key”: “fourD”, “text”: “fourD”,“group”: “Lane4”},
{ “key”: “Lane5”, “text”: “Lane5”, “isGroup”: true, “group”: “Pool2”, “color”: “lightyellow”, “size”: “88 200” },
{ “key”: “Lane6”, “text”: “Lane6”, “isGroup”: true, “group”: “Pool2”, “color”: “lightgreen”, “size”: “88 200” },
{ “key”: “fiveA”, “group”: “Lane5”,“text”: “fiveA” },
{ “key”: “sixA”, “group”: “Lane6”,“text”: “sixA” }
];
const linkList = [
{ “from”: “oneA”, “to”: “oneB” },
{ “from”: “oneA”, “to”: “oneC” },
{ “from”: “oneB”, “to”: “oneD” },
{ “from”: “oneC”, “to”: “oneD” },
{ “from”: “twoA”, “to”: “twoB” },
{ “from”: “twoA”, “to”: “twoC” },
{ “from”: “twoA”, “to”: “twoF” },
{ “from”: “twoB”, “to”: “twoD” },
{ “from”: “twoC”, “to”: “twoD” },
{ “from”: “twoD”, “to”: “twoG” },
{ “from”: “twoE”, “to”: “twoG” },
{ “from”: “twoF”, “to”: “twoG” },
{ “from”: “fourA”, “to”: “fourB” },
{ “from”: “fourB”, “to”: “fourC” },
{ “from”: “fourC”, “to”: “fourD” }
];
but when i take the data from server,it can’t work well,the node can’t show;
but when i add the Ioc property in the data,the data also from server,it can work well;
the data such as:
[
{ “key”: “Pool1”, “text”: “Pool”, “isGroup”: true, “category”: “Pool”, “loc”: “0.5 32.014286804199216” },
{ “key”: “Pool2”, “text”: “Pool2”, “isGroup”: true, “category”: “Pool”, “loc”: “572.5 32.014286804199216” },
{ “key”: “Lane1”, “text”: “Lane1”, “isGroup”: true, “group”: “Pool1”, “color”: “lightblue”, “loc”: “0.5 58.537134302507155”, “size”: “138 269.04863281250005” },
{ “key”: “Lane2”, “text”: “Lane2”, “isGroup”: true, “group”: “Pool1”, “color”: “lightgreen”, “loc”: “137.5 58.537134302507155”, “size”: “246 269.04863281250005” },
{ “key”: “Lane3”, “text”: “Lane3”, “isGroup”: true, “group”: “Pool1”, “color”: “lightyellow”, “size”: “88 269.04863281250005”, “loc”: “382.5 58.537134302507155” },
{ “key”: “Lane4”, “text”: “Lane4”, “isGroup”: true, “group”: “Pool1”, “color”: “orange”, “loc”: “469.5 58.537134302507155”, “size”: “88 269.04863281250005” },
{ “key”: “oneA”,“text”: “oneA”, “group”: “Lane1” },
{ “key”: “oneB”, “text”: “oneB”,“group”: “Lane1”, “loc”: “12.5 143.04929250563217” },
{ “key”: “oneC”, “text”: “oneC”,“group”: “Lane1”, “loc”: “82.230224609375 143.04929250563217” },
{ “key”: “oneD”, “text”: “oneD”,“group”: “Lane1”, “loc”: “41.627197265625 215.56145070875715” },
{ “key”: “twoA”, “text”: “twoA”,“group”: “Lane2”, “loc”: “219.0048828125 70.53713430250716” },
{ “key”: “twoB”, “text”: “twoB”,“group”: “Lane2”, “loc”: “149.5 143.04929250563217” },
{ “key”: “twoC”, “text”: “twoC”,“group”: “Lane2”, “loc”: “219.230224609375 143.04929250563217” },
{ “key”: “twoD”, “text”: “twoD”,“group”: “Lane2”, “loc”: “218.627197265625 215.56145070875718” },
{ “key”: “twoE”, “text”: “twoE”,“group”: “Lane2”, “loc”: “330.004638671875 70.53713430250716” },
{ “key”: “twoF”, “text”: “twoF”,“group”: “Lane2”, “loc”: “290.125244140625 143.04929250563217” },
{ “key”: “twoG”, “text”: “twoG”,“group”: “Lane2”, “loc”: “288.74462890625 288.0736089118822” },
{ “key”: “fourA”, “text”: “fourA”,“group”: “Lane4”, “loc”: “481.877685546875 70.53713430250716” },
{ “key”: “fourB”, “text”: “fourB”,“group”: “Lane4”, “loc”: “482.372802734375 143.04929250563217” },
{ “key”: “fourC”, “text”: “fourC”,“group”: “Lane4”, “loc”: “482.10302734375 215.56145070875718” },
{ “key”: “fourD”, “text”: “fourD”,“group”: “Lane4”, “loc”: “481.5 288.0736089118822” },
{ “key”: “Lane5”, “text”: “Lane5”, “isGroup”: true, “group”: “Pool2”, “color”: “lightyellow”, “loc”: “572.5 58.537134302507155”, “size”: “88 200” },
{ “key”: “Lane6”, “text”: “Lane6”, “isGroup”: true, “group”: “Pool2”, “color”: “lightgreen”, “loc”: “659.5 58.537134302507155”, “size”: “88 200” },
{ “key”: “fiveA”, “group”: “Lane5”,“text”: “fiveA”, “loc”: “584.5 70.53713430250716” },
{ “key”: “sixA”, “group”: “Lane6”,“text”: “sixA”, “loc”: “671.5 70.53713430250716” }
]
i don’t know how to crate the Ioc, can i don’t set the Ioc property and the gojs work well?
how can i solve this problem,thanks?