カテゴリごとに色分けする

Pivotick に色を割り当ててもらいましょう。 ColorPaletteMapperは安定した色を出しますカテゴリ値ごとに、color はアクセサーを受け入れます。つまり、1 行ですべての値をマッピングします。ノードのグループを色に設定します。ここに示されている 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' }
    ]
}

カテゴリごとに色分けする ​

カテゴリごとに色分けする