元素-标签-复制

标签 | G6 图可视化引擎复制https://g6.antv.antgroup.com/examples/element/label/#copy

Node样式设置与Label

Node样式设置与Label文字超出省略号。

const graph = new Graph({container: 'container',data,node: {style: {x: 200,y: 200,size: 150,labelPlacement: 'center',labelText: (d) => d.data.label,labelWordWrap: true,  // label文字省略号条件1labelMaxWidth: '90%', // label文字省略号条件2labelBackground: true,labelBackgroundFill: '#eee',labelBackgroundFillOpacity: 0.5,labelBackgroundRadius: 4,labelPointerEvents: 'none',labelBackgroundPointerEvents: 'none'}},// ...

【效果图】

tooltip

plugins 的自定义 tooltip ，先看下没有使用getContent的效果，像echart的tooltip。

使用getContent进行自定义，同时添加行间样式，效果如下：

const graph = new Graph({// ...plugins: [{type: 'tooltip',getContent: (e, items)=>{let result = `<h4 style="font-size: 32px;">Node Label:</h4>`items.forEach((item)=>{result += `<p style="margin: 32px 0;">${item.data.label}</p>`})return result}}]
})

点击事件

// 点击事件
graph.on('node:click', (e) => {const node = graph.getNodeData(e.target.id)// 下面这句相当于 const label = node && node.data && node.data.labelconst label = node?.data?.labelconsole.log(e);console.log(node);})

悬停状态

​图形交互​​中控制节点的悬停状态。

// ​​图形交互​​ 中控制节点的 ​​悬停状态（Hover State）
graph.on(NodeEvent.POINTER_ENTER, (e) => {// 当鼠标 ​​移入（悬停）​​ 某个节点时，将该节点的状态设置为 'active'graph.setElementState({ [e.target.id]: 'active' })
})graph.on(NodeEvent.POINTER_OUT, (e) => {// 当鼠标 ​​移出​​ 某个节点时，​​清除该节点的状态​​（恢复默认样式）graph.setElementState({ [e.target.id]: [] })
})

设置node state

const graph = new Graph({container: 'container',data,node: {style: {// ...},// 扩展 设置state// https://g6.antv.antgroup.com/manual/behavior/build-in/click-select#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95state: {// 选中节点状态active: {fill: '#ccc',},},},

【完整代码】

// https://g6.antv.antgroup.com/examples/element/label/#copyimport { Graph, NodeEvent } from "@antv/g6";const data = {nodes: [{id: 'node1',data: {label: 'Click to copy this label which is too long to be displayed.'}}]
}const graph = new Graph({container: 'container',data,node: {style: {x: 200,y: 200,size: 150,labelPlacement: 'center',labelText: (d) => d.data.label,labelWordWrap: true,  // label文字省略号条件1labelMaxWidth: '90%', // label文字省略号条件2labelBackground: true,labelBackgroundFill: '#eee',labelBackgroundFillOpacity: 0.5,labelBackgroundRadius: 4,labelPointerEvents: 'none',labelBackgroundPointerEvents: 'none'},// 扩展 设置state// https://g6.antv.antgroup.com/manual/behavior/build-in/click-select#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95state: {// 选中节点状态active: {fill: '#ccc',},},},behaviors: ['drag-element'],plugins: [{type: 'tooltip',getContent: (e, items) => {let result = `<h4 style="font-size: 32px;">Node Label:</h4>`items.forEach((item) => {result += `<p style="margin: 32px 0;">${item.data.label}</p>`})return result}}]
})graph.render();// 点击事件
graph.on('node:click', (e) => {const node = graph.getNodeData(e.target.id)// 下面这句相当于 const label = node && node.data && node.data.labelconst label = node?.data?.labelconsole.log(e);console.log(node);// 将 label 的值写入系统剪贴板（复制到剪贴板）navigator.clipboard.writeText(label)alert('copied to clipboard!')})// ​​图形交互​​ 中控制节点的 ​​悬停状态（Hover State）
graph.on(NodeEvent.POINTER_ENTER, (e) => {// 当鼠标 ​​移入（悬停）​​ 某个节点时，将该节点的状态设置为 'active'graph.setElementState({ [e.target.id]: 'active' })
})graph.on(NodeEvent.POINTER_OUT, (e) => {// 当鼠标 ​​移出​​ 某个节点时，​​清除该节点的状态​​（恢复默认样式）graph.setElementState({ [e.target.id]: [] })
})

---

 项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }

详细教程 | G6 图可视化引擎本教程将引导你从头开始完成一个 G6 图表开发，并在过程中了解和学习 G6 的主要概念。https://g6.antv.antgroup.com/manual/getting-started/step-by-step