G6 preliminary learning experience and case application

After a period of study, I have a preliminary understanding of G6. Next, I will summarize the harvest through a specific application example.

Brief introduction

This practice aims to build a simple map of "spring epidemic" through G6. Through the map, users can quickly know the symptoms of various diseases, infected organs, medical departments and other information.

code analysis

G6 and data import

 <div id="mountNode"></div>
 //Call G6
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
    <script>
      //Import data
   const data={
    "nodes": [
      {"id": "0", "label": "Influenza", "class": "disease" },
      {"id": "1", "label": "measles", "class": "disease" },
      /*......*/
    ],
    "edges": [
      {"source": "0", "target": "8", "label": "From", "weight": 1 },
      {"source": "0", "target": "13", "label": "produce", "weight": 1 },
      /*......*/
    ]
  };

Create a series of nodes and edges. In order to facilitate subsequent processing, nodes are divided into different classes ("disease", "department"...). Through the label attribute of the edge, different relationships such as "send to", "generate" are defined.

Graph instantiation

  const graph = new G6.Graph({
        container: 'mountNode',
        //Set basic properties of graph container
        width: 1800,
        height: 800,
        //Preprocessing points
        defaultNode: {
          size: 70,
          labelCfg: {
            style: {
              fill: '#fff',
            },
          },
        },
        //Edge preprocessing
        defaultEdge: {
          labelCfg: {
            autoRotate: true,
          },
        },
        layout: {
        ......
        },
        modes: {
            ......
        },
        nodeStateStyles: {
          ......
      });

After the edge points are preprocessed, the map can be more vivid by defining layout, interaction mode, etc.

Layout

layout: {
          type: 'force', //Define layout type
          linkDistance: 300, //Specify edge distance
          preventOverlap: true, //Prevent node coincidence
        },

Specific form

interactive

Interaction modes and tools

modes: {
           //Allow built-in interaction
           //Drag node: drag point, drag canvas: drag canvas
           default: ['drag-canvas', 'zoom-canvas', 'drag-node',
           //Built in interactive tools
           //Provide details as you mouse over
           {type:'tooltip',formatText(model){
             return model.label;
           },offset: 10},
           {type:'edge-tooltip',formatText(model){
             return model.label;
           },offset: 10},
           ],
        },

Drag behavior mode
Specific information display
Interaction state

 nodeStateStyles: {
           //When the node is clicked, the color changes and the surrounding is bold
           click: {
              stroke: '#000',
              lineWidth: 3,
                  },
        },

By setting the interaction state, the state of the node edge changes with the event
Implementation of interaction
Interaction can be "activated" through events

 graph.on('node:click', e => {
         const clickNodes = graph.findAllByState('node', 'click');
         clickNodes.forEach(cn => {
         graph.setItemState(cn, 'click', false);
        });
        const nodeItem = e.item; 
        graph.setItemState(nodeItem, 'click', true); 
        });

When a node is clicked, the previously set interaction behavior will be "activated"

Ergodic processing

In order to distinguish easily, different nodes / edges can be presented in different forms through traversal processing. (in this case, nodes of different classes have different colors)

 const nodes = data.nodes;
 //ergodic
      nodes.forEach(node => {
          if (!node.style) {
            node.style = {};
          }
          node.style.lineWidth = 1;
          node.style.stroke = '#666';
          //Handling different classes
          //Different classes, different colors
          switch (node.class) {
            case 'disease': {
              node.type = 'circle';
              node.style.fill = 'steelblue';
              break;
            }
            case 'organ': {
              node.type = 'circle';
              node.style.fill = 'blue';
              break;
            }
           /*......*/
          }
        });

Data loading and rendering

 graph.data(data);
        graph.render();
      main();

Then it can be loaded by browser

More processing (to be continued)

Node grouping Combo

It can be seen that node crowding exists in the generated graph. In order to facilitate users to read better, we can process nodes in groups.
(this example is based on the class settings of the node)

Tags: Spring Attribute

Posted on Sun, 14 Jun 2020 03:48:19 -0400 by [n00b]