Dynamic Implementation on tree view mapper

GoJS
1

I am trying to make the tree mapper https://gojs.net/latest/samples/treeMapper.html implementation dynamic with the data:
recordSrc : Record[] = [
{
type: ‘entry’,
name: ‘Record 12’,
color: “lightblue”,
group: -1,
info: “”,
fields: [
{type: ‘entry’, color:"", name: ‘field11A’, info: “”, group: -1, links:[], fields: []},
{type: ‘entry’, color:"", name: ‘field11B’, info: “”, group: -1, links: [], fields: []},
],
links: []
}
];

recordTgt : Record[] = [
{
type: ‘entry’,
name: ‘Record 21’,
color: “lightblue”,
group: -2,
info: “”,
fields: [
{type: ‘entry’, color:"", name: ‘field21A’, info: “”, group: -2, links:[], fields: []},
{type: ‘entry’, color:"", name: ‘field21B’, info: “”, group: -2, links: [], fields: []},
],
links: []
}
];

I want to have Record 12 of recordSrc variable as a node with fields as its child nodes and similarly with the recordTgt.

Can anyone tell me a reference or a soultion to do the same?

2

I’m sorry but I do not understand what you want. How is what you want different than a simplified version of the GoJS Tree Mapper sample? Also, do you really care about the version number?

3

I want to generate a dynamic tree structure from the server data and use the links to map them… I was thinking of the concept behind incremental tree to achieve the same…am I in the right way?

4

That can be made to work, but it would be less work for you if you changed the form of the data so that there was just a single Array of node data, including the definitions of the two groups.

It also isn’t clear to me why you have two Arrays of link data, since they do not naturally belong to either side or group.

5

Thanks, changing the data to a simpler format worked…I now just have a nodeDataArray and a linkDataArray…

6

Hi Walter, I successfully built a dynamic tree view using tree model by setting the parent element in each node data , but it seems that the same data does not work with GraphLinksModel. For eg. if I have node data array say

[{key: Table1, group: table1}, {key: field1, group: table1, parent: Table1},
{key: field2, group: table1, parent: Table1}]

the tree structure is formed with TreeModel but the same does not work with GraphLinksModel. I have studied the GraphLinksModel API as well but could not get a solution, can you please clarify?

7

When I am using tree mapper I will have to use GraphLinksModel with the node array and link array. Here is an example:
My node data array:
image

my tree mapper

image
image787×228 2.39 KB

My group template

image
image688×525 59.7 KB

my node template

image
image749×541 65.4 KB

I am expecting this on both side
image

8

Yes, that is correct – the diagram is not tree-structured, so one cannot use a TreeModel but must use a GraphLinksModel. That means all of the link relationships must be provided via the GraphLinksModel.linkDataArray. That includes both the links within each subtree as well as the links between trees, in groups.

9

Can you please provide me with some reference of building a tree structured design with the application of GraphLinksModel…Thanks in advance, Walter :)

10

I do not understand the question. The graph that people want to build is fundamentally not tree-structured, even if some pieces of it happen to be tree-structured. The original Tree Mapper sample demonstrates exactly what I think you want to build. GoJS Tree Mapper

11

Ok got it…that means when using the TreeModel we need to use a parent property to define a tree parent node like
image
but when using the GraphLinksModel, according to tree mapper example, we need to use the linkDataArray to link the parent and child node just as it is done in

image
image793×245 36.1 KB
…thanks

12

That’s right. And you can use TreeLayout or any other layout independent of the kind of model you are using. Although a Diagram.layout that was a TreeLayout wouldn’t work well for your case.

And Groups are only possible if you use a GraphLinksModel.

https://gojs.net/latest/intro/usingModels.html