Cubic Bezier Curve

Overview

A cubic Bezier curve is a versatile smooth curve with control points that can be freely distributed, suitable for connecting nodes in any direction.

Use cases:

Suitable for graphs with any layout, such as network graphs and relationship graphs.
Use when smooth node connections are needed without specific directional requirements.

Online Experience

createGraph(
  {
    data: {
      nodes: [{ id: 'node1' }, { id: 'node2' }],
      edges: [{ id: 'edge1', source: 'node1', target: 'node2', text: 'cubic' }],
    },
    node: {
      style: {
        fill: '#f8f8f8',
        stroke: '#8b9baf',
        lineWidth: 1,
      },
    },
    edge: {
      type: 'cubic',
      style: {
        stroke: '#7e3feb',
        lineWidth: 2,
        labelText: (d) => d.text,
        labelBackground: true,
        labelBackgroundFill: '#f9f0ff',
        labelBackgroundOpacity: 1,
        labelBackgroundLineWidth: 2,
        labelBackgroundStroke: '#7e3feb',
        labelPadding: [1, 10],
        labelBackgroundRadius: 4,
      },
    },
    behaviors: ['drag-canvas', 'drag-element'],
    layout: { type: 'grid', cols: 2 },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    gui.add({ type: 'cubic' }, 'type').disable();

    const options = {
      curveOffset: 20,
      curvePosition: 0.5,
    };
    const optionFolder = gui.addFolder('cubic.style');
    optionFolder.add(options, 'curveOffset', 0, 100, 1);
    optionFolder.add(options, 'curvePosition', 0, 1, 0.1);

    optionFolder.onChange(({ property, value }) => {
      graph.updateEdgeData([{ id: 'edge1', style: { [property]: value } }]);
      graph.render();
    });
  },
);

设置 edge.type 为 cubic 以使用三次贝塞尔曲线。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseEdge

Attribute	Description	Type	Default
controlPoints	Array of control points used to define the shape of the curve. If not specified, control points will be calculated using `curveOffset` and `curvePosition`.	[Point, Point]	-
curvePosition	Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`.	number \| number[]	0.5
curveOffset	Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending.	number \| number[]	20

Point

type Point = [number, number] | [number, number, number] | Float32Array;

Example

Built-in Cubic Bezier Curve Edge Effect

Overview

A cubic Bezier curve is a versatile smooth curve with control points that can be freely distributed, suitable for connecting nodes in any direction.

Use cases:

Suitable for graphs with any layout, such as network graphs and relationship graphs.
Use when smooth node connections are needed without specific directional requirements.

Online Experience

createGraph(
  {
    data: {
      nodes: [{ id: 'node1' }, { id: 'node2' }],
      edges: [{ id: 'edge1', source: 'node1', target: 'node2', text: 'cubic' }],
    },
    node: {
      style: {
        fill: '#f8f8f8',
        stroke: '#8b9baf',
        lineWidth: 1,
      },
    },
    edge: {
      type: 'cubic',
      style: {
        stroke: '#7e3feb',
        lineWidth: 2,
        labelText: (d) => d.text,
        labelBackground: true,
        labelBackgroundFill: '#f9f0ff',
        labelBackgroundOpacity: 1,
        labelBackgroundLineWidth: 2,
        labelBackgroundStroke: '#7e3feb',
        labelPadding: [1, 10],
        labelBackgroundRadius: 4,
      },
    },
    behaviors: ['drag-canvas', 'drag-element'],
    layout: { type: 'grid', cols: 2 },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    gui.add({ type: 'cubic' }, 'type').disable();

    const options = {
      curveOffset: 20,
      curvePosition: 0.5,
    };
    const optionFolder = gui.addFolder('cubic.style');
    optionFolder.add(options, 'curveOffset', 0, 100, 1);
    optionFolder.add(options, 'curvePosition', 0, 1, 0.1);

    optionFolder.onChange(({ property, value }) => {
      graph.updateEdgeData([{ id: 'edge1', style: { [property]: value } }]);
      graph.render();
    });
  },
);

设置 edge.type 为 cubic 以使用三次贝塞尔曲线。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseEdge

Attribute	Description	Type	Default
controlPoints	Array of control points used to define the shape of the curve. If not specified, control points will be calculated using `curveOffset` and `curvePosition`.	[Point, Point]	-
curvePosition	Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`.	number \| number[]	0.5
curveOffset	Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending.	number \| number[]	20

Point

type Point = [number, number] | [number, number, number] | Float32Array;

G6

Cubic Bezier Curve

G6

Cubic Bezier Curve

Overview

Online Experience

Style Configuration

Point

Example

Built-in Cubic Bezier Curve Edge Effect

Overview

Online Experience

Style Configuration

Point

Example

Built-in Cubic Bezier Curve Edge Effect