Overview

G6 is a data-driven charting library, where data is one of the most important concepts. In G6, data is the core of the chart, and both display and interaction are based on data.

Common graph data formats include:CSV, DOT, GDF, GML, GraphML, GEXF etc。

G6 uses JSON format to describe the graph structure, which includes information about nodes and edges. Here is a simple JSON data example:

{
  "nodes": [{ "id": "node1" }, { "id": "node2" }],
  "edges": [{ "source": "node1", "target": "node2" }]
}

Compared to the other formats mentioned above, the JSON format has a more intuitive and understandable data structure. It is also more flexible, allowing for easy expansion of node and edge attributes.

It is a data exchange format widely supported by computers, so you do not have to worry about data format compatibility issues.

Data Structure

In G6, graph data consists of three parts: nodes (node data), edges (edge data), and combos (combo data). Each part corresponds to different elements in the graph, and their types and data determine how the graph is displayed.

interface GraphData {
  nodes: NodeData[]; // Node data
  edges?: EdgeData[]; // Edge data (optional)
  combos?: ComboData[]; // Combo data (optional)
}

Node Data

A node is the basic building block of a graph and represents an entity within the graph. Each node has a unique id used to identify it, and nodes can also have data, styles, and states.

Example:

{
  "id": "node-1",
  "type": "circle",
  "data": { "name": "alice", "role": "Admin" },
  "style": { "x": 100, "y": 200, "size": 32, "fill": "violet" },
  "states": ["selected"],
  "combo": null
}

Edge Data

An edge connects nodes and represents the relationship between them. Each edge is associated with two nodes (source and target), and edges themselves can have data, styles, and states. Edge data is often used to represent logical relationships, such as user connections in social networks or step flows in flowcharts.

Example:

{
  "source": "alice",
  "target": "bob",
  "type": "line",
  "data": { "relationship": "friend", "strength": 5 },
  "style": { "stroke": "green", "lineWidth": 2 },
  "states": ["hover"]
}

Combo Data

Combos allow you to create a logical unit for multiple nodes, used for layering, grouping, or other structural purposes. A combo can contain child nodes or other combos, forming a nested structure.

Example:

{
  "id": "combo1",
  "type": "circle",
  "data": { "groupName": "Group A" },
  "style": { "fill": "lightblue", "stroke": "blue", "collapsed": true },
  "states": [],
  "combo": null
}

Data Organization and Best Practices

To ensure correct rendering and interaction of the graph, it is recommended to organize the data according to G6's standard data structure. Each element (node, edge, combo) should contain a data field to store business data and custom properties.

• Avoid using identifiers that conflict with internal G6 field names, such as id, type, style, etc., to prevent naming conflicts.
• Store business data (such as user information, social network relationships, etc.) in the data field. This ensures flexibility and scalability of the data.

Example:

{
  "nodes": [
    {
      "id": "node1",
      "data": { "name": "Alice", "role": "Admin" }
    },
    {
      "id": "node2",
      "data": { "name": "Bob", "role": "User" }
    }
  ],
  "edges": [
    {
      "source": "node1",
      "target": "node2",
      "data": { "relationship": "friend" }
    }
  ]
}

API

G6 provides a series of APIs to access and manipulate data, including:

• getData
• setData
• updateData
• getNodeData
• getEdgeData
• getComboData
• addData
• addNodeData
• addEdgeData
• addComboData
• updateData
• updateNodeData
• updateEdgeData
• updateComboData
• removeData
• removeNodeData
• removeEdgeData
• removeComboData

Through different APIs, you can conveniently access and manipulate graph data, performing operations such as adding, deleting, modifying, and querying the graph.

Use Remote Data

G6 does not provide functionality for data retrieval and parsing. For local JSON data, you can directly import and use it as follows:

import data from './path/to/data.json' assert { type: 'json' };

For remote data, you can use fetch or other networking libraries to retrieve the data:

fetch('https://path/to/data.json')
  .then((res) => res.json())
  .then((data) => {
    // Use data
  });