默认节点样式

render.defaultNodeStyle 设置每个节点的基本外观 - 形状、大小、颜色、描边和标签。通过其 style 覆盖每个节点的任何字段。这里，四个内置形状（circle、square、triangle、hexagon）共享一个默认样式，因此这张卡兼作形状参考。

选项

const options = {
    render: {
        // Applied to every node unless its own `style` overrides a field.
        defaultNodeStyle: {
            shape: 'circle',
            size: 18,
            color: '#4f46e5',
            strokeColor: '#ffffff',
            strokeWidth: 2,
            textColor: '#334155',
            // Render each label below its shape (negative shift = below the node).
            text: (node) => node.getData()?.label,
            textVerticalShift: -1.4
        }
    }
}

数据

// One node per built-in shape — each overrides only `shape`, so the rest of the
// appearance comes from the shared defaultNodeStyle below.
const data = {
    nodes: [
        { id: 'circle', data: { label: 'circle' }, style: { shape: 'circle' } },
        { id: 'square', data: { label: 'square' }, style: { shape: 'square' } },
        { id: 'triangle', data: { label: 'triangle' }, style: { shape: 'triangle' } },
        { id: 'hexagon', data: { label: 'hexagon' }, style: { shape: 'hexagon' } }
    ],
    edges: [
        { from: 'circle', to: 'square' },
        { from: 'square', to: 'triangle' },
        { from: 'triangle', to: 'hexagon' }
    ]
}