Diamond

Common Node Configurations

Donut

Overview

A diamond is a geometric shape with four equal sides and diagonal symmetry.

Applicable scenarios:

Used to represent decision nodes, conditional judgments, or critical paths.

Suitable for representing decision nodes or key steps in flowcharts.

Commonly used in flowcharts, decision trees, network diagrams, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: { nodes: [{ id: 'node1', style: { size: [48, 24], fill: '#7e3feb' } }] },
    node: { type: 'diamond' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'diamond' }, 'type').disable();

    const options = { 'size[0]': 48, 'size[1]': 24 };

    const optionFolder = gui.addFolder('diamond.style');
    optionFolder.add(options, 'size[0]', 0, 100, 1);
    optionFolder.add(options, 'size[1]', 0, 100, 1);

    optionFolder.onChange(({ object }) => {
      graph.updateNodeData([{ id: 'node1', style: { size: [object['size[0]'], object['size[1]']] } }]);
      graph.render();
    });
  },
);

设置 node.type 为 diamond 以使用菱形节点。

Example

Built-in Diamond Node Effect

import { Graph, iconfont } from '@antv/g6';

const style = document.createElement('style');
style.innerHTML = `@import url('${iconfont.css}');`;
document.head.appendChild(style);

const data = {
  nodes: [
    { id: 'default' },
    { id: 'halo' },
    { id: 'badges' },
    { id: 'ports' },
    {
      id: 'active',
      states: ['active'],
    },
    {
      id: 'selected',
      states: ['selected'],
    },
    {
      id: 'highlight',
      states: ['highlight'],
    },
    {
      id: 'inactive',
      states: ['inactive'],
    },
    {
      id: 'disabled',
      states: ['disabled'],
    },
  ],
};

const graph = new Graph({
  container: 'container',
  data,
  node: {
    type: 'diamond',
    style: {
      size: 40,
      labelText: (d) => d.id,
      iconFontFamily: 'iconfont',
      iconText: '\ue602',
      halo: (d) => (d.id === 'halo' ? true : false),
      badges: (d) =>
        d.id === 'badges'
          ? [
              {
                text: 'A',
                placement: 'right-top',
              },
              {
                text: 'Important',
                placement: 'right',
              },
              {
                text: 'Notice',
                placement: 'right-bottom',
              },
            ]
          : [],
      badgeFontSize: 8,
      badgePadding: [1, 4],
      portR: 3,
      ports: (d) =>
        d.id === 'ports'
          ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
          : [],
    },
  },
  layout: {
    type: 'grid',
  },
});

graph.render();

G6

Diamond

Overview

Online Experience

Style Configuration

Example

Built-in Diamond Node Effect