Legend 图例
阅读时间约 3 分钟
图例插件用于展示图中元素的分类信息,支持节点、边、组合的分类信息展示。
createGraph({data: {nodes: [{id: 'node-1',type: 'circle',data: { cluster: 'node-type1' },},{id: 'node-2',type: 'rect',data: { cluster: 'node-type2' },},{id: 'node-3',type: 'triangle',data: { cluster: 'node-type3' },},{id: 'node-4',type: 'diamond',data: { cluster: 'node-type4' },},],edges: [{source: 'node-1',target: 'node-2',data: { cluster: 'edge-type1' },},{source: 'node-1',target: 'node-4',data: { cluster: 'edge-type2' },},{source: 'node-3',target: 'node-4',},{source: 'node-2',target: 'node-4',data: { cluster: 'edge-type3' },},],},layout: { type: 'grid', cols: 2 },node: {style: { size: 24 },palette: {field: 'cluster',},},behaviors: ['drag-canvas'],plugins: ['grid-line',{type: 'legend',key: 'legend',nodeField: 'cluster',edgeField: 'cluster',itemLabelFontSize: 12,},],},{ width: 600, height: 300 },(gui, graph) => {const options = {type: 'legend',trigger: 'hover',position: 'bottom',itemSpacing: 4,rowPadding: 10,colPadding: 10,itemMarkerSize: 16,itemLabelFontSize: 12,};const optionFolder = gui.addFolder('Legend Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'trigger', ['hover', 'click']);optionFolder.add(options, 'position', ['left', 'right', 'top', 'bottom']);optionFolder.add(options, 'itemSpacing', 0, 20, 1);optionFolder.add(options, 'colPadding', 0, 20, 1);optionFolder.add(options, 'rowPadding', 0, 20, 1);optionFolder.add(options, 'itemMarkerSize', 12, 20, 1);optionFolder.add(options, 'itemLabelFontSize', 12, 20, 1);optionFolder.onChange(({ property, value }) => {graph.updatePlugin({key: 'legend',[property]: value,});graph.render();});},);
参考示例:
legend
| string
此插件已内置,你可以通过 type: 'legend'
来使用它。
string
图例画布类名,传入外置容器时不生效
string | ((item: NodeData | EdgeData | ComboData) => string)
组合分类标识
HTMLElement | string
图例挂载的容器,无则挂载到 Graph 所在容器
CSSStyleDeclaration
图例的容器样式,传入外置容器时不生效
string | ((item: NodeData | EdgeData | ComboData) => string)
边分类标识
string | ((item: NodeData | EdgeData | ComboData) => string)
节点分类标识
'left' | 'right' | 'top' | 'bottom' Default:
'bottom'
图例在画布中的相对位置,默认为 'bottom',代表在画布正下方
'hover' | 'click' Default:
'hover'
图例触发行为
'hover'
:鼠标移入图例项时触发'click'
:鼠标点击图例项时触发刷新图例元素状态
updateElement(): void;