Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the skills of using gojs in interactive visualization js library". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the skills for using gojs in the interactive visualization js library?"

1. Brief introduction to gojs

Gojs is a js library for building interactive visualization maps, using customizable templates and layouts to build complex nodes, links and groups, so as to build simple to complex charts, such as flow chart, brain chart, organization chart, Gantt chart and so on. It also provides many advanced functions for user interaction, such as drag and drop, copy and paste, and in-place text editing.

Gojs is a product of Northwoods Software. Northwoods Software was founded in 1995, specializing in interaction diagram controls and class libraries. Its vision is to provide an excellent graphical user interface and has grown into a world-class supplier of interactive diagram components and class libraries across a variety of platforms.

2. Gojs application scenarios

Based on the high constructability of gojs, you can draw many kinds of visualization maps:

Flow chart

Brain map

Tree graph

Gantt chart

Bar chart

Pie chart

Map

Instrument panel

More sample diagrams (hundreds)

3. Why choose gojs:

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

Sort by the degree to which you can customize the drawing:

Gojs, d3js > antv > echarts, highcharts

If the requirements are simple and there is no need for custom diagram elements, then echarts and highcharts can choose which library is the favorite demo effect.

If you need to customize the diagram elements to some extent, you can see if antv g2/g6 demo can meet the requirements, and you can customize most of the diagram elements.

If none of the above can solve your needs, then it is highly customizable, so you can consider d3js, gojs, or go to demo first to see which one is closer to your needs.

Summary: the high customizability of gojs is very suitable for complex graph interactions.

4. Gojs getting started Guide

View case: 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 their own needs, you can refer to the case code to complete the requirements, to achieve twice the result with half the effort, but also a very good reference. 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 is more helpful to understand the concept and structure of drawing before drawing. If you know the outline before writing, you will be clearer and more efficient in writing.

Start to draw basic demo hands-on

Reference library

Create a gojs chart container in the page and set the width and height of the container, otherwise the graph will not be drawn

Create a chart instance

Define layouts, styles, interactions, properties, events, etc. (can be omitted)

Bind data, render chart

/ / Chart container / / reference / / create a chart 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"}], [/ / connect {from: "Alpha", to: "Beta"}, {from: "Alpha", to: "Gamma"}, {from: "Beta", to: "Beta"}, {from: "Gamma", to: "Delta"} {from: "Delta", to: "Alpha"}])

If you want to control layout, style, node, group, connection, event, and so on, you can customize the corresponding template. Take the node as an example:

/ / 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: guide, api

5. Tips (very practical)

Remove the watermark and default to the watermark with library information in the upper left corner after the chart is drawn.

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

A.yr=b.V [Ra ("7eba17a4ca3b1a8346")] [Ra ("78a118b7")] (b.V.

Comment or delete the code and change it as follows:

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

Es6 Import gojs: reference loadingGojs

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

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

Import * as go from'. / go-module.js'

In addition, because go-module.js has been packaged, you can configure packaging to exclude the packaging of the file and reduce the packaging time. Take webpack as an example, modify as follows:

{test: /\ .js $/, loader: 'babel-loader', include: [resolve (' src'), resolve ('test')], + exclude: [resolve (' src/assets/lib/')] / / all 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 came to help:

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

Diagram is the class name of the chart container.

6. Practice: realize the visual interaction diagram of node grouping relationship

Requirements: can correctly show the level of the group, as well as the relationship between nodes. And implement the interaction:

Single-select node, multi-select node, get node information

If you select a group, you can select the nodes in the group and get the node information in the group.

If the node is selected, the current node is regarded as the root node, and all the nodes under the root node connection can be selected and the node information can be obtained.

Interface data obtained from the backend:

Interface data

Const data = {"properties": [{"key": "tMube 2272", "parentKey": "Jmur1051", "name": ""}, {"key": "pmur344", "parentKey": "Gmura 1586357764", "name": "test"} {"key": "tmur2271", "parentKey": "jmur1051", "name": "query"}, {"key": "tmur2275", "parentKey": "jmur1052", "name": "have fun"}, {"key": "jmur1054" "parentKey": "Pmure 344", "name": "hee hee"}, {"key": "tmur2274", "parentKey": "Jmur1052", "name": "query", {"key": "Jmur1051", "parentKey": "Pmur444", "name": "hello"} {"key": "jmur1052", "parentKey": "Pmure444", "name": "Editor"}, {"key": "tmur2281", "parentKey": "jmur1054", "name": "hee hee"}, {"key": "Pmur444" "parentKey": "GMurmur1586357624", "name": "test"}, {"key": "GMurray 1586357624", "name": "data group 1"}, {"key": "Gmura 1586357764", "name": "data group 2"}, {"key": "tcolor 2273" "parentKey": "jmur1051", "name": "New"}], "dependencies": [{"sourceKey": "tmur2272", "targetKey": "tmur2274"}, {"sourceKey": "tmur2274", "targetKey": "tmur2275"} {"sourceKey": "tmur2273", "targetKey": "tmur2272"}, {"sourceKey": "tmur2271", "targetKey": "tmur2272"}, {"sourceKey": "tmur2272", "targetKey": "tmur2281"}]}. I believe that you have a deeper understanding of the "interactive visualization js library gojs skills", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.