Diamond 菱形

阅读时间约 2 分钟

概述

菱形是一个四边相等的几何形状,具有对角线对称性。

适用场景:

  • 用于表示决策节点、条件判断或关键路径。

  • 适合表示流程图中的判断节点或关键步骤。

  • 常用于流程图、决策树、网络图等。

在线体验

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.typediamond 以使用菱形节点。

样式配置

如果元素有其特定的属性,我们将在下面列出。对于所有的通用样式属性,见BaseNode

示例

内置菱形节点效果

上一篇
Circle 圆形
下一篇
Donut 甜甜圈