How to use the gojs.GraphLinksModel function in gojs

To help you get started, we’ve selected a few gojs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nicolaserny / react-gojs-example / src / GraphView.tsx View on Github external
{ selectionChanged: (node: Node) => this.props.onNodeSelection(node.key as string, node.isSelected) },
                $(
                    go.Shape,
                    'RoundedRectangle',
                    { strokeWidth: 0 },
                    // Shape.fill is bound to Node.data.color
                    new go.Binding('fill', 'color')),
                $(
                    go.TextBlock,
                    { margin: 8 },  // some room around the text
                    // TextBlock.text is bound to Node.data.key
                    new go.Binding('text', 'key'))
            );

        // create the model data that will be represented by Nodes and Links
        this.myDiagram.model = new go.GraphLinksModel(this.props.model.nodeDataArray, this.props.model.linkDataArray);
    }
    render() {
github vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / statemachinedoc.tsx View on Github external
{ toArrow: "Standard", stroke: null })
                  )
              },
              {
                routing: go.Link.AvoidsNodes,
                curve: go.Link.JumpOver,
                corner: 5,
                toShortLength: 4
              },
              new go.Binding("points"),
              $(go.Shape,  // the link path shape
                { isPanelMain: true, strokeWidth: 2 }),
              $(go.Shape,  // the arrowhead
                { toArrow: "Standard", stroke: null })
            ),
          model: new go.GraphLinksModel([  // specify the contents of the Palette
            { text: "Start", figure: "Circle", fill: "#00AD5F" },
            { text: "Step" },
            { text: "DB", figure: "Database", fill: "lightgray" },
            { text: "???", figure: "Diamond", fill: "lightskyblue" },
            { text: "End", figure: "Circle", fill: "#CE0620" },
            { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
          ], [
            // the Palette also has a disconnected Link, which the user can drag-and-drop
            { points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
          ])
        });
    });
  };
github nimble-platform / frontend-service / src / app / explorative-search / model / RecClass.ts View on Github external
for (let lay = 1; lay <= this.maxLayers; lay++) {
                    let radius = lay * this.layerThickness;
                    let circle =
                        $(go.Part,
                            { name: 'CIRCLE', layerName: 'Grid' },
                            { locationSpot: go.Spot.Center, location: this.root.location },
                            $(go.Shape, 'Circle',
                                { width: radius * 2, height: radius * 2 },
                                { fill: 'rgba(200,200,200,0.2)', stroke: null }));
                    diagram.add(circle);
                }
            }
        });

        // Use the Lists to Create the Radial Layout...
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
        // For Determining the Root of the Diagram
        let centerPoint = nodeDataArray[0];
        let rootNode = myDiagram.findNodeForData(centerPoint);
        let rootDiagram = rootNode.diagram;
        rootNode.category = 'Root';
        rootDiagram.layoutDiagram(true);
    }
github cai3178940 / youran / youran-generate-ui / src / views / entity / erDiagram.vue View on Github external
if (item.type === 'fk') {
            item.figure = 'Decision'
            item.color = this.getBrush('bluegrad')
          } else if (item.type === 'delete') {
            item.figure = 'ThickX'
            item.color = this.getBrush('redgrad')
          } else if (item.type === 'version') {
            item.figure = 'PaperTape'
            item.color = this.getBrush('greengrad')
          } else {
            item.figure = ''
            item.color = null
          }
        }
      }))
      this.diagram.model = new go.GraphLinksModel(this.erDiagram.nodeData, this.erDiagram.linkData)
    },

gojs

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

SEE LICENSE IN license.html
Latest version published 8 days ago

Package Health Score

84 / 100
Full package analysis