Hi
We need Fishbone Diagram need to be constructed with customizations, Can you please share any sample project for Angular With TypeScript base.
Regards
Nageswar
Hi
We need Fishbone Diagram need to be constructed with customizations, Can you please share any sample project for Angular With TypeScript base.
Regards
Nageswar
You can just use:
https://gojs.net/latest/extensionsTS/FishboneLayout.ts
(GoJS/FishboneLayout.ts at master Ā· NorthwoodsSoftware/GoJS Ā· GitHub)
and adapt the code from:
Fishbone Layout
Hi,
Thanks for the reply, with the given reference files we are able to draw diagram(attached screen shot). In the head parameter(Node), we required to have multiple parameters(Nodes) with click, focus kind of events. so we need nodes inside a node to do specific actions. Inner Nodes can be any number , which are dynamically added(need to be done with the help of template). Can you please help us on this.
Regards
Nageswar
I suppose you could make the root Node actually be a Group. But do you really need to be able to have separate Links connecting those items within the root node?
If not, those items can just be separate objects within a simple root node. GoJS Item Arrays-- Northwoods Software
Youāll want to leave the default node template alone and define a separate node template that is only used by the root node. GoJS Template Maps -- Northwoods Software
Hi,
Thank you for the reply,I understand the ItemArray but i could not able get only the head node alone to set the isgroup property and adding the children node, can you please help us on this.
Regards
Nageswar
Why do you want those items within the root to be separate Nodes?
Itās a requirement, the fish bone head need to have multiple nodes(parameters), which are with relevant events.
In the model data, set the root dataās isGroup: true
, and for each member node data object, set its group
to the root nodeās key.
Later you can style the Group by assigning Diagram.groupTemplate so that you can make it look and behave how you want, including setting its Group.layout.
In the attached snippet, i tried by updating the isGroup property to the root node and by added child (not sure where to add)node by referring the group key, still its not working.
this is one issue and other ones:
adding and removal of the nodes from the diagram and head(with context menu).
Exporting diagram in high resolutions.
Regards
Nageswar
One problem is that the TreeModel class does not support groups. GoJS Using Models -- Northwoods Software
You have to use a GraphLinksModel. Look at the models used by any of the samples that use groups: GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software. For example: Rounded Groups With a Header and a Footer
Of course, if you do not really need to use a group and its member nodes as the root node, you would not need to redesign and reimplement how the model is made.
I do not know how you want organize your data, but notice how in the Fishbone sample that the only reason a nested JavaScript structure works is because the walkJson
function transforms the structure into a flattened Array of Objects.
Okay, thanks.
please let us know the Scrollable group node for structuring Head with the child nodes , in the below link :https://gojs.net/latest/extensionsTS/ScrollingTable.js. but we required in .TS format as like FishboneLayout.ts file. Please let us know as soon as possible.
Regards
Nageswar
The extensions
directory holds *.JS files that can be loaded in <script> tags.
The extensionsTS
directory holds *.JS modules in UMD format, compiled from *.TS TypeScript source files.
If you change the extensionsTS/tsconfig.json
file, you can recompile those *.TS files to produce ES6 modules.
As like FishboneLayout.ts i cant use ScrollingTable.ts becuse āScrollingTableāā has no exported member āScrollingTableā. so is there any possiblity to get it done. Iām not sure what need to be changed in tsconfig.app.json file!. If this is also not available we cant proceed further.
And
In the following image we need to bring the decorated small icons into the node image not on the edges(thos should be inside node image and very next to edge), is this possible? and the node text can be moded individually?
and need to know how to export fish bone/process in high resolution images. When i tried exporting the above mentioned node, the following only i got as output.
Please reply as soon as possible.
Regards
Nageswar
That is correct ā extensionsTS/ScrollingTable.ts
does not export any symbol. It defines some panel builders by calling GraphObject.defineBuilder, only for side-effect.
Note that āScrollingTableā is a Panel, so it can only hold and scroll elements within that Panel. It has nothing to do with member Nodes within a Group. So I take your interest in āScrollingTableā to mean that you are no longer interested in Groups and member Nodes to implement your root node. And thus you can continue using a TreeModel instead of a GraphLinksModel.
Regarding your node design, I donāt understand what you mean and what you want. Could you please start a different topic for each different subject about which you have questions? Your node implementation has nothing to do with fishbone layout.
There are two diagram representations āfishoneā and āprocess diagramā in our project , for these both we are doing the POC, so only i am asking about both here. So for fishbone i need construct the diagram with head bone as below.
and for the process diagram, i asked below query
In the following image we need to bring the decorated small icons into the node image not on the edges(thos should be inside node image and very next to edge), is this possible? and the node text can be moded individually?
and need to know how to export fish bone/process in high resolution images. When i tried exporting the above mentioned node, the following only i got as output.
Still if needed i will create new topic for diagram,
Thanks & Regards
Nageswar
Yes, please start a new topic for the process node design. I see a lot of shapes there and I have no idea what you have implemented and what you want instead.
okay, for fish bone alone here you can help us for constructing the head node as below.
Thanks & Regards
Nageswar
OK. But you have already seen Scrolling Table and GoJS/ScrollingTableScript.ts at master Ā· NorthwoodsSoftware/GoJS Ā· GitHub. How is that different from what you want?