Hover

Hover over any node to reveal more information:

function hoverIn(nodeSel) {
    nodeSel.attrs({
        size: [60, 25],
        color: 'red',
        labels: n => ({ 0: {
            visible: true,
            text: `You have hovered\nover node ${n}`
        }}),
    })
}

function hoverOut(nodeSel) {
    nodeSel.attrs({
        size: [20, 12],
        color: 'dark-gray',
        labels: { 0: { visible: false } }
    })
}

const initNodes = canvas.nodes([1, 2, 3]).add({
    shape: 'rect',
    pos: (n, i) => [(i - 1) * 100, 0]
})

initNodes.onhoverin(n => hoverIn(canvas.node(n)))
initNodes.onhoverout(n => hoverOut(canvas.node(n)))
hoverOut(initNodes)