In this tutorial series, we will step-by-step implement a simple visualization scene that shows nodes and edges and gives them basic interaction capabilities such as dragging and picking.

In this section, we will learn how to describe a scene using a scene graph.

Our scene is very simple, it contains two nodes implemented with Circle, an edge connecting them implemented with Line, where the text on each node is implemented with Text.

DEMO in CodeSandbox

Create Node

First we import the base graph Circle from @antv/g, which our node uses to implement:

import { Circle } from '@antv/g';

Then we need to define a set of properties for the graph：

const node1 = new Circle({
    style: {
        r: 100,
        fill: '#1890FF',
        stroke: '#F04864',
        lineWidth: 4,
    },
});

We can create a second node in the same way.

Adding text to a node

We want to display descriptive text on the node, again we bring in the base graph Text from @antv/g:

import { Text } from '@antv/g';

const text1 = new Text({
    style: {
        text: 'Node1',
        fontFamily: 'Avenir',
        fontSize: 22,
        fill: '#fff',
        textAlign: 'center',
        textBaseline: 'middle',
    },
});

The text should be a child of the node, and in the scene graph, this parent-child relationship is constructed via appendChild：

node1.appendChild(text1);

We only need to set the position of the node, and all its children (text) will follow:

node1.setPosition(200, 200);

Create edge

We can import Line from @antv/g to connect the two endpoints:

import { Line } from '@antv/g';

const edge = new Line({
    style: {
        x1: 200,
        y1: 200,
        x2: 400,
        y2: 200,
        stroke: '#1890FF',
        lineWidth: 2,
    },
});

At this point our scene is defined and in the next section we will render the scene using the renderer.