按类别颜色

让Pivotick为您指定颜色。 ColorPaletteMapper 为每个类别值提供稳定的颜色，color 接受访问器 - 因此一行将每个节点的组映射到一种颜色。这里显示的okabe-ito调色板是色盲安全的； tol-bright、kelly-22 和 d3-category10 也内置。

添加 UI.legend ，相同的映射会获得读者可以单击的键 - 请参阅可过滤图例。

选项数据

// import { ColorPaletteMapper } from 'pivotick'

// A colorblind-safe palette; getColor() assigns and remembers a color per value.
const palette = new ColorPaletteMapper('okabe-ito')

const options = {
    render: {
        defaultNodeStyle: {
            size: 16,
            strokeColor: '#ffffff',
            textColor: '#334155',
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.6,
            // `color` accepts (node) => string — map each node's group to a color.
            color: (node) => palette.getColor(node.getData()?.group)
        }
    }
}

const data = {
    nodes: [
        { id: 'web', data: { name: 'Web app', group: 'Frontend' } },
        { id: 'mobile', data: { name: 'Mobile', group: 'Frontend' } },
        { id: 'auth', data: { name: 'Auth API', group: 'Backend' } },
        { id: 'orders', data: { name: 'Orders', group: 'Backend' } },
        { id: 'pg', data: { name: 'Postgres', group: 'Data' } },
        { id: 'cache', data: { name: 'Redis', group: 'Data' } },
        { id: 'queue', data: { name: 'Queue', group: 'Infra' } }
    ],
    edges: [
        { from: 'web', to: 'auth' },
        { from: 'web', to: 'orders' },
        { from: 'mobile', to: 'auth' },
        { from: 'orders', to: 'pg' },
        { from: 'orders', to: 'queue' },
        { from: 'auth', to: 'cache' }
    ]
}

按类别颜色 ​

按类别颜色