Introduction and tips for using the interactive visualization JS library gojs

1. Introduction to gojs

gojs is a js library for building interactive visual diagrams. It uses customizable templates and layouts to build complex nodes, links, and groups, thereby building simple to complex diagrams, such as flowcharts, mind maps, organizational charts, Gantt charts, etc. It also provides many advanced features for user interaction, such as drag and drop, copy and paste, in-place text editing, etc.

gojs is a product of Northwoods Software. Northwoods Software was founded in 1995 and specializes in interactive graphics controls and libraries. Its vision is to provide excellent graphical user interfaces, and it has now grown into a world-class supplier of interactive diagram components and libraries across various platforms.

2. Gojs application scenarios

Based on the high constructability of gojs, many types of visualizations can be drawn:

1. flow chart
2. Mind Map
3. Treemap
4. Gantt chart
5. Bar Chart
6. Pie Chart
7. map
8. Dashboard
9. More example images (hundreds)

3. Why choose gojs:

There are many visualization libraries, such as echarts, highcharts, antv series, d3, and today's protagonist gojs,...

Sort by degree of customizability of the drawing:

gojs, d3js > antv > echarts , highcharts

If the requirements are simple and no custom chart elements are needed, then you can choose the library that best matches the demo effect, echarts or highcharts.

If you need to customize the graph elements to a certain extent, you can see if antv g2/g6 demo can meet your needs. You can customize most of the graph elements.

If the above cannot meet your needs, then it is highly customizable. You can consider d3js and gojs, or go and watch the demo first to see which one is closer to your needs and adopt it.

Summary: gojs is highly customizable and very suitable for complex graph interactions.

4. Gojs Getting Started Guide

• View examples: samples

The purpose is to have a general understanding of what gojs can do, and to find and confirm which case effect is closer to your needs. You can refer to the case code to complete your needs and achieve twice the result with half the effort. It is also a very good reference material for getting started. After reading one or two case codes, you can also have a basic understanding of gojs drawing.

• Key concepts

After reading the case code, I have a basic understanding of gojs drawing. It will be more helpful to understand the drawing concepts and structures before drawing. It’s like knowing the outline before writing, so that your writing ideas will be clearer and more efficient.

• Start drawing a basic demo

• Reference Library
• Create a gojs chart container in the page and set the width and height of the container, otherwise the graphics cannot be drawn
• Create a chart instance
• Define layout, style, interaction, properties, events, etc. (optional)
• Bind data and render charts

 // Diagram container <div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
    
    // Reference <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    
    <script>
        // Create a graph instance var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");

        // Bind data diagram.model = new go.GraphLinksModel(
            [ // Node { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" },
                { key: "Delta", color: "pink" }
            ],
            [ // Connection { from: "Alpha", to: "Beta" },
                { from: "Alpha", to: "Gamma" },
                { from: "Beta", to: "Beta" },
                { from: "Gamma", to: "Delta" },
                { from: "Delta", to: "Alpha" }
            ]
        );
    </script> 

If you want to control the layout, style, nodes, groups, connections, events, etc., you can customize the corresponding template. The following takes the node as an example:

 // The node template describes how to construct each node diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
        $(go.TextBlock, new go.Binding("text", "key"))
    ); 

More: guides, api

5. Tips (very practical)

• Remove the watermark. After the chart is drawn, there will be a watermark with library information in the upper left corner by default.

Search the library source code for 7eba17a4ca3b1a8346 and find the location:

 a.yr=bV[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](bV,Kk,4,4);

Comment or delete the code and change it to the following:

 a.yr=function () {return true;};

• es6 import gojs: refer to loadingGojs

Because the watermark needs to be removed, the library source code must be downloaded, and now front-end projects are basically based on es6 module organization files.

Therefore, you need to download go-module.js so that you can import it in the required files:

 import * as go from './go-module.js';

In addition, since go-module.js has been packaged, you can configure the package to exclude this file from packaging to reduce packaging time. Taking webpack as an example, the modifications are as follows:

 {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')],
    + exclude: [resolve('src/assets/lib/')] //Packaged libraries are placed in this directory}

• Remove the blue border: Click on the chart and you will see that the chart has a blue border. CSS comes to the rescue:

 .diagram canvas {
    border: none;
    outline: none;
}

diagram is the class name of the diagram container.

6. Practice: Implementing a visual interactive graph of node grouping relationships

1. Requirement: The group hierarchy and the relationship between nodes can be correctly displayed. And implement interaction:
   • Select a single node or multiple nodes to get node information
   • Select a group, select the nodes in the group, and get the node information in the group
   • Select a node, the current node is considered the root node, all nodes connected to the root node can be selected, and node information can be obtained
2. Interface data obtained from the backend:

Interface data

 const data = {
  		"properties": [
  			{ "key": "t-2272", "parentKey": "j-1051", "name": "哈哈" },
  			{ "key": "p-344", "parentKey": "g--1586357764", "name": "test" },
  			{ "key": "t-2271", "parentKey": "j-1051", "name": "Query" },
  			{ "key": "t-2275", "parentKey": "j-1052", "name": "Happy" },
  			{ "key": "j-1054", "parentKey": "p-344", "name": "嘻嘻" },
  			{ "key": "t-2274", "parentKey": "j-1052", "name": "Query" },
  			{ "key": "j-1051", "parentKey": "p-444", "name": "hello" },
  			{ "key": "j-1052", "parentKey": "p-444", "name": "Edit" },
  			{ "key": "t-2281", "parentKey": "j-1054", "name": "嘻嘻" },
  			{ "key": "p-444", "parentKey": "g--1586357624", "name": "test" },
  			{ "key": "g--1586357624", "name": "Data Group 1" },
  			{ "key": "g--1586357764", "name": "Data Group 2" },
  			{ "key": "t-2273", "parentKey": "j-1051", "name": "New" }
  		],
  		"dependencies": [
  			{ "sourceKey": "t-2272", "targetKey": "t-2274" },
  			{ "sourceKey": "t-2274", "targetKey": "t-2275" },
  			{ "sourceKey": "t-2273", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2271", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2272", "targetKey": "t-2281" }
  		]
  	}

1. Refer to gojs demo: grouping, navigation

at last

I will share the idea of ​​achieving the effect next time. If you are interested, you can use the data, refer to the demo and the knowledge shared in this article to implement it yourself.

I also started as a novice (I had never used gojs before) and finally achieved the effect. If there are any shortcomings or errors in this article, or if you have any good suggestions, please point them out.

Thank you so much! ! !

This concludes this article on the use and techniques of the interactive visualization js library gojs. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.