Labels

Display node data using multiple labels:

const playerData = {
    1: { name: 'Sam', team: 'Panda', points: 45 },
    2: { name: 'Alice', team: 'Lion', points: 27 },
    3: { name: 'Bob', team: 'Zebra', points: 34 },
    4: { name: 'Sarah', team: 'Dolphin', points: 24 },
    5: { name: 'Maggie', team: 'Lion', points: 15 }
}
const [keys, values] = [
    Object.keys(playerData),
    Object.values(playerData)
]

canvas.nodes(keys).data(values).add({
    shape: 'rect',
    size: [30, 12],
    labels: d => ({
        0: { text: d['name'] },
        team: {
            angle: 270,
            color: 'blue',
            text: 'Team: ' + d['team']
        },
        points: {
            angle: 90,
            color: 'red',
            text: 'Points: ' + d['points']
        }
    })
})

canvas.edges([[1, 2], [1, 4], [2, 3],
    [2, 5], [3, 5], [4, 5]]).add()