Quadratic Bezier Curve

Overview

A quadratic Bezier curve is a smooth curve whose shape is determined by a start point, an end point, and a control point.

Use cases:

Suitable for moderately complex graphs, such as relationship graphs and network graphs.
Use when smooth node connections are needed with limited computational resources.

Online Experience

createGraph(
  {
    data: {
      nodes: [{ id: 'node1' }, { id: 'node2' }],
      edges: [{ id: 'edge1', source: 'node1', target: 'node2', text: 'quadratic' }],
    },
    node: {
      style: {
        fill: '#f8f8f8',
        stroke: '#8b9baf',
        lineWidth: 1,
      },
    },
    edge: {
      type: 'quadratic',
      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: 'quadratic' }, 'type').disable();

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

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

设置 edge.type 为 quadratic 以使用曲线。

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	-
curvePosition	Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`.	number	0.5
curveOffset	Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending.	number	30

Point

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

Example

Built-in Quadratic Bezier Curve Edge Effect

Overview

A quadratic Bezier curve is a smooth curve whose shape is determined by a start point, an end point, and a control point.

Use cases:

Suitable for moderately complex graphs, such as relationship graphs and network graphs.
Use when smooth node connections are needed with limited computational resources.

Online Experience

createGraph(
  {
    data: {
      nodes: [{ id: 'node1' }, { id: 'node2' }],
      edges: [{ id: 'edge1', source: 'node1', target: 'node2', text: 'quadratic' }],
    },
    node: {
      style: {
        fill: '#f8f8f8',
        stroke: '#8b9baf',
        lineWidth: 1,
      },
    },
    edge: {
      type: 'quadratic',
      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: 'quadratic' }, 'type').disable();

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

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

设置 edge.type 为 quadratic 以使用曲线。

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	-
curvePosition	Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`.	number	0.5
curveOffset	Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending.	number	30

Point

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

G6

Quadratic Bezier Curve

G6

Quadratic Bezier Curve

Overview

Online Experience

Style Configuration

Point

Example

Built-in Quadratic Bezier Curve Edge Effect

Overview

Online Experience

Style Configuration

Point

Example

Built-in Quadratic Bezier Curve Edge Effect