Class: KnowledgeGraph

KnowledgeGraph

KnowledgeGraph 知识图谱。此类提供了创建知识图谱实例的配置项, 包括知识图谱的尺寸、中心点、缩放比例、布局、节点配置、边配置、高亮样式、拖拽设置等参数。

new KnowledgeGraph(config)

Usage
// 浏览器
<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
<script>
  new mapboxgl.supermap.KnowledgeGraph(config);
  
</script>

// ES6 Import
import { KnowledgeGraph } from '@supermapgis/iclient-mapboxgl';

new KnowledgeGraph(config);

common/overlay/KnowledgeGraph.js, line 5
Name Type Description
config KnowledgeGraph.Config

创建 graph 实例的配置项。

Version:
  • 11.1.0

Members

graphstring

graph 实例。

Methods

static dataFromGraphMap(queryResult, graphMap){KnowledgeGraph.Data}

common/overlay/KnowledgeGraph.js, line 190

将 SuperMap iServer GraphMap 数据转换成 KnowledgeGraph 数据。

Name Type Description
queryResult Object

SuperMap iServer 知识图谱服务 query 数据。

graphMap Object

SuperMap iServer 知识图谱服务 GraphMap 数据 (data.graphMap)。

Returns:
Type Description
KnowledgeGraph.Data 返回数据。

static dataFromKnowledgeGraphQuery(queryResult){KnowledgeGraph.Data}

common/overlay/KnowledgeGraph.js, line 201

将 SuperMap iServer KnowledgeGraphService query 数据转换成 KnowledgeGraph 数据。

Name Type Description
queryResult Object

SuperMap iServer 知识图谱服务 query 数据。

Returns:
Type Description
KnowledgeGraph.Data 返回数据。

addItem(type, model)

common/overlay/KnowledgeGraph.js, line 821

新增元素(节点和边)。

Name Type Description
type string

元素类型,可选值为 'node'、'edge'。

model Object

元素的数据模型,具体内容参见元素配置项。

autoResize()

common/overlay/KnowledgeGraph.js, line 383

浏览器窗口大小发生改变时,重新设置 canvas 画布的大小,重新渲染。

changeSize(width, height)

common/overlay/KnowledgeGraph.js, line 584

改变画布大小。

Name Type Description
width number

宽度。

height number

高度。

changeVisibility(item, visible)

common/overlay/KnowledgeGraph.js, line 791

更改元素是否显示。

Name Type Description
item Object

元素实例。

visible boolean

是否显示元素,true 为显示,false 为隐藏。

clear(graph)

common/overlay/KnowledgeGraph.js, line 940

清除画布元素。

Name Type Default Description
graph Object this.graph 可选

graph 实例。

clearHighlight(params)

common/overlay/KnowledgeGraph.js, line 261

取消之前高亮节点和边。

Name Type Description
params KnowledgeGraph.clearHighlightParams 可选

取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。

Version:
  • 11.2.0

collapseNode(id)

common/overlay/KnowledgeGraph.js, line 743

收起当前节点。

Name Type Description
id string

元素 ID。

collapseNodes(collapseData)

common/overlay/KnowledgeGraph.js, line 321

折叠节点。

Name Type Description
collapseData Array.<string>

元素 ID 数组。

createGraph(config){Object}

common/overlay/KnowledgeGraph.js, line 361

创建 KnowledgeGraph 的 graph 实例。

Name Type Description
config Object

graph 配置项。

Returns:
Type Description
Object graph 实例。

destroy(graph)

common/overlay/KnowledgeGraph.js, line 949

销毁画布。

Name Type Default Description
graph Object this.graph 可选

graph 实例。

expandNode(id)

common/overlay/KnowledgeGraph.js, line 733

展开当前节点。

Name Type Description
id string

元素 ID。

expandNodes(expandData)

common/overlay/KnowledgeGraph.js, line 307

展开节点。

Name Type Description
expandData Array.<string>

元素 ID 数组。

find(type, fn){Object}

common/overlay/KnowledgeGraph.js, line 662

获取邻居节点数组。

Name Type Description
type string

元素类型,可选值为 'node'、'edge'。

fn function

查找的规则。

Returns:
Type Description
Object 如果有符合规则的元素实例,则返回第一个匹配的元素实例,否则返回 undefined。

findAll(type, fn){Object}

common/overlay/KnowledgeGraph.js, line 672

获取邻居节点数组。

Name Type Description
type string

元素类型,可选值为 'node'、'edge'。

fn function

查找的规则。

Returns:
Type Description
Object 如果有符合规则的元素实例,则返回所有元素实例,否则返回 undefined。

findById(id){Object}

common/overlay/KnowledgeGraph.js, line 652

根据 ID,查询对应的元素实例。

Name Type Description
id string

元素 ID。

Returns:
Type Description
Object 如果有符合规则的元素实例,则返回第一个匹配的元素实例,否则返回 undefined。

fitCenter(animate, animateCfg)

common/overlay/KnowledgeGraph.js, line 429

平移图到中心将对齐到画布中心,但不缩放。优先级低于 fitView。

Name Type Description
animate boolean 可选

是否开启动画。

animateCfg KnowledgeGraph.AnimateConfig 可选

若带有动画,可配置动画,参见基础动画教程。若未配置,则跟随 graph 的 animateCfg 参数。

fitView(padding, rules, animate, animateCfg)

common/overlay/KnowledgeGraph.js, line 417

让画布内容适应视口。

Name Type Description
padding Array.<number> | number 可选

[top, right, bottom, left] 四个方向上的间距值。

rules Object 可选

fitView 的规则,参数如下:{ onlyOutOfViewPort?: boolean; direction?: 'x' / 'y' / 'both'; ratioRule?: 'max' / 'min}。

animate boolean 可选

是否开启动画。

animateCfg KnowledgeGraph.AnimateConfig 可选

若带有动画,可配置动画。若未配置,则跟随 graph 的 animateCfg 参数。

getCanvas(){HTMLElement}

common/overlay/KnowledgeGraph.js, line 614

获取 canvas。

Returns:
Type Description
HTMLElement canvas。

getContainer(){HTMLElement}

common/overlay/KnowledgeGraph.js, line 605

获取 Graph 的 DOM 容器。

Returns:
Type Description
HTMLElement DOM 容器。

getEdges(){Array}

common/overlay/KnowledgeGraph.js, line 632

获取图中所有节点的实例。这里返回的是边的实例,而不是边的数据项。

Returns:
Type Description
Array 返回值表示图中所有边的实例。

getEdgesByNode(node){Array}

common/overlay/KnowledgeGraph.js, line 683

获取与当前节点有关联的所有边。

Name Type Description
node Object

node 实例。

Returns:
Type Description
Array edge 实例数组。

getGraph(){Object}

common/overlay/KnowledgeGraph.js, line 374

获取 KnowledgeGraph 的 graph 实例。

Returns:
Type Description
Object graph 实例。

getGraphCenterPoint(){Object}

common/overlay/KnowledgeGraph.js, line 439

获取图内容的中心绘制坐标。

Returns:
Type Description
Object 包含的属性:x 和 y 属性,分别表示渲染坐标下的 x、y 值。

getHeight(){number}

common/overlay/KnowledgeGraph.js, line 511

获取 graph 当前的高度。

Returns:
Type Description
number graph 当前的高度。

getInEdges(node){Array}

common/overlay/KnowledgeGraph.js, line 693

获取与当前节点关联的所有入边。

Name Type Description
node Object

node 实例。

Returns:
Type Description
Array edge 实例数组。

getMaxZoom(){number}

common/overlay/KnowledgeGraph.js, line 484

获取 graph 当前允许的最大缩放比例。

Returns:
Type Description
number 返回值表示当前视口的最大缩放比例。

getMinZoom(){number}

common/overlay/KnowledgeGraph.js, line 466

获取 graph 当前允许的最小缩放比例。

Returns:
Type Description
number 返回值表示当前视口的最小缩放比例。

getModel(item){Object}

common/overlay/KnowledgeGraph.js, line 811

获取元素的数据模型。

Name Type Description
item Object

元素实例。

Returns:
Type Description
Object
  • 返回值为节点的数据模型。

getNeighbors(node, type){Array}

common/overlay/KnowledgeGraph.js, line 641

获取邻居节点数组。

Name Type Description
node string | INode

节点 ID 或节点实例。

type string | undefined

['source'| 'target' | undefined] 邻居类型, 'source' 只获取当前节点的源节点,'target' 只获取当前节点指向的目标节点, 若不指定则返回所有类型的邻居。

Returns:
Type Description
Array 返回值符合要求的节点数组。

getNodes(){Array}

common/overlay/KnowledgeGraph.js, line 623

获取图中所有节点的实例。

Returns:
Type Description
Array 返回值表示图中所有节点的实例。

getOutEdges(node){Array}

common/overlay/KnowledgeGraph.js, line 703

获取与当前节点关联的所有出边。

Name Type Description
node Object

node 实例。

Returns:
Type Description
Array edge 实例数组。

getSourceByEdge(edge){Object}

common/overlay/KnowledgeGraph.js, line 713

获取当前边的起始节点

Name Type Description
edge Object

node 实例。

Returns:
Type Description
Object 返回值为起始节点的实例。

getTargetByEdge(edge){Object}

common/overlay/KnowledgeGraph.js, line 723

获取当前边的终止节点。

Name Type Description
edge Object

node 实例。

Returns:
Type Description
Object 终止节点的实例。

getViewPortCenterPoint(){Object}

common/overlay/KnowledgeGraph.js, line 448

获取窗口的中心绘制坐标。

Returns:
Type Description
Object 包含的属性:x 和 y 属性,分别表示渲染坐标下的 x、y 值。

getWidth(){number}

common/overlay/KnowledgeGraph.js, line 502
Returns:
Type Description
number graph 当前的宽度。

getZoom(){number}

common/overlay/KnowledgeGraph.js, line 457

获取当前视口的缩放比例。

Returns:
Type Description
number 返回值表示当前视口的缩放比例,默认值为 1。

handleNodeStatus(data)

common/overlay/KnowledgeGraph.js, line 292

展开、折叠、隐藏节点。

Name Type Description
data Object

展开、折叠、隐藏的对象,eg: {expand:['id1'], collapse:['id2'], hidden:['id3']}。

hide(item)

common/overlay/KnowledgeGraph.js, line 782

隐藏元素。只隐藏 item 自身,若需要在隐藏节点的同时隐藏相关边,应调用 hideItem(item)。

Name Type Description
item Object

元素实例。

hideItem(item, stack)

common/overlay/KnowledgeGraph.js, line 763

隐藏指定元素。若 item 为节点,则相关边也会随之隐藏。而 hide() 则将只隐藏自身。

Name Type Description
item string | Object

元素 ID 或元素实例。

stack boolean 可选

操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可。

hideNodes(hiddenData)

common/overlay/KnowledgeGraph.js, line 335

隐藏节点。

Name Type Description
hiddenData Array.<string>

元素 ID 数组。

highlight(params)

common/overlay/KnowledgeGraph.js, line 231

高亮节点和边。

Name Type Description
params KnowledgeGraph.highlightParams

高亮参数。

Version:
  • 11.2.0

initGraph(config){Object}

common/overlay/KnowledgeGraph.js, line 520

创建 KnowledgeGraph 实例。

Name Type Description
config Object

graph 配置项。

Returns:
Type Description
Object graph 实例。

isVisible(item){boolean}

common/overlay/KnowledgeGraph.js, line 801

查询元素显示状态。

Name Type Description
item Object

元素实例。

Returns:
Type Description
boolean
  • 返回值为 true,则表示当前元素处于显示状态,否则处于隐藏状态。

nodeLabelOpenEllipsis(nodeLabelMaxWidth, nodes){Array}

common/overlay/KnowledgeGraph.js, line 916

转换 label 的省略号。

Name Type Description
nodeLabelMaxWidth Object

node 节点标签是否开启省略号。

nodes Object

graph 的 nodes 数据。

Returns:
Type Description
Array nodes

off(eventName, handler)

common/overlay/KnowledgeGraph.js, line 895

graph 关闭事件。

Name Type Description
eventName string

事件名,参考 on 方法的事件名。

handler function

监听函数。

on(eventName, handler)

common/overlay/KnowledgeGraph.js, line 867

graph 监听事件。

Name Type Description
eventName string

事件名,可选事件名参见:Node交互事件名、Edge 交互事件名、Canvas 交互事件名、时机事件. 通用事件名:click dbclick mouseenter mousemove mouseout mouseover mouseleave mousedown mouseup contextmenu dragstart drag dragend dragenter dragleave drop keydown keyup wheel touchstart touchmove touchend
Node交互事件名:node:通用事件名,例如 node:click
Edge交互事件名:edge:通用事件名,例如 edge:click
Canvas交互事件名:canvas:通用事件名,例如 canvas:click
时机事件:用于监听图的某方法调用前后的时机。
beforerender 调用 render 方法之前触发
afterrender 调用 render 方法之后触发
beforeadditem 调用 addItem 方法之前触发
afteradditem 调用 addItem 方法之后触发
beforeremoveitem 调用 removeItem 方法之前触发
afterremoveitem 调用 removeItem 方法之后触发
beforeupdateitem 调用 updateItem 方法之前触发
afterupdateitem 调用 updateItem 方法之后触发
beforegraphrefresh 调用 refresh 方法之前触发
aftergraphrefresh 调用 refresh 方法之后触发
beforelayout 布局前触发。调用 graph.render 时会进行布局,因此 render 时会触发。或用户主动调用图的 graph.layout 时触发
afterlayout 布局完成后触发。调用 graph.render 时会进行布局,因此 render 时布局完成后会触发。或用户主动调用图的 graph.layout 时布局完成后触发
viewportchange 调用 graph.moveTo 或 graph.zoom 均会触发该事件

handler function

监听函数。

refresh()

common/overlay/KnowledgeGraph.js, line 576

改变画布大小。

refreshItem(item)

common/overlay/KnowledgeGraph.js, line 850

刷新指定元素。

Name Type Description
item string | Object

元素 ID 或元素实例。

refreshPositions()

common/overlay/KnowledgeGraph.js, line 859

当节点位置发生变化时,刷新所有节点位置,并重计算边的位置。

removeItem(item)

common/overlay/KnowledgeGraph.js, line 831

删除元素。

Name Type Description
item string | Object

元素 ID 或元素实例。

render(graph)

common/overlay/KnowledgeGraph.js, line 557

根据提供的数据渲染视图。

Name Type Default Description
graph Object this.graph 可选

graph 实例。

resize(width, height)

common/overlay/KnowledgeGraph.js, line 594

改变画布大小后,重新渲染。

Name Type Description
width number

宽度。

height number

高度。

setData(data, graph)

common/overlay/KnowledgeGraph.js, line 541

设置默认数据。

Name Type Default Description
data KnowledgeGraph.Data

graph 数据。

graph Object this.graph 可选

graph 实例。

setMaxZoom(ratio)

common/overlay/KnowledgeGraph.js, line 493

设置 graph 当前允许的最大缩放比例。

Name Type Description
ratio number

缩放比例。

setMinZoom(ratio)

common/overlay/KnowledgeGraph.js, line 475

设置 graph 当前允许的最小缩放比例。

Name Type Description
ratio number

缩放比例。

show(item)

common/overlay/KnowledgeGraph.js, line 773

显示元素。只显示 item 自身,若需要在显示节点的同时显示相关边,应调用 showItem(item)。

Name Type Description
item Object

元素实例。

showItem(item, stack)

common/overlay/KnowledgeGraph.js, line 753

显示指定的元素。若 item 为节点,则相关边也会随之显示。而 show() 则将只显示自身。

Name Type Description
item string | Object

元素 ID 或元素实例。

stack boolean 可选

操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可。

toDataURL(type, backgroundColor){string}

common/overlay/KnowledgeGraph.js, line 905

转换成图片。

Name Type Description
type string

图片类型 'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'。

backgroundColor string 可选

图片的背景色,可选,不传值时将导出透明背景的图片。

Returns:
Type Description
string 返回值表示生成的图片的 URL。

updateGraph(data, graph)

common/overlay/KnowledgeGraph.js, line 566

更新数据。

Name Type Default Description
data KnowledgeGraph.Data

graph 数据。

graph Object this.graph 可选

graph 实例。

updateItem(item, model)

common/overlay/KnowledgeGraph.js, line 840

更新元素,包括更新数据、样式等。

Name Type Description
item string | Object

元素 ID 或元素实例。

model Object

元素的数据模型,具体内容参见元素配置项。

zoom(ratio, center, animate, animateCfg)

common/overlay/KnowledgeGraph.js, line 393

改变视口的缩放比例,在当前画布比例下缩放,是相对比例。

Name Type Description
ratio number

缩放比例。

center Object 可选

以 center 的 x、y 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放。

animate boolean 可选

是否开启动画。

animateCfg KnowledgeGraph.AnimateConfig 可选

若带有动画,可配置动画。若未配置,则跟随 graph 的 animateCfg 参数。

zoomTo(ratio, center, animate, animateCfg)

common/overlay/KnowledgeGraph.js, line 405

改变视口的缩放比例,在当前画布比例下缩放,是相对比例。

Name Type Description
ratio number

缩放比例。

center Object 可选

以 center 的 x、y 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放。

animate boolean 可选

是否开启动画。

animateCfg KnowledgeGraph.AnimateConfig 可选

若带有动画,可配置动画。若未配置,则跟随 graph 的 animateCfg 参数。

Type Definitions

AnimateConfigObject

动画配置项。

Properties:
Name Type Default Description
duration number 500 可选

一次动画的时长。

easing string 'linearEasing' 可选

动画函数。

delay number 0 可选

是否重复执行动画。

repeat boolean false 可选

边透明度。

shadowColor string 可选

阴影颜色。

clearHighlightParamsObject

取消高亮节点、边的参数。

Properties:
Name Type Description
nodeIDs Array

高亮节点id数组。

edgeIDs Array

高亮边id数组。

ConfigObject

创建 graph 实例的配置项。

Properties:
Name Type Default Description
container string | HTMLElement

创建的容器 ID 或容器本身,默认是 'knowledgeGraph'。

width number

图的宽度,默认是 container 的 width。

height number

图的高度,默认是 container 的 height。

center Array.<number> 可选

中心点的渲染坐标。可以通过 KnowledgeGraph.prototype.getViewPortCenterPoint 获取。

zoom number 可选

缩放比例。

minZoom number 可选

最小缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例小于该值,则将使用该值进行缩放,并返回 false。

maxZoom number 可选

最大缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例大于该值,则将使用该值进行缩放,并返回 false。

layout KnowledgeGraph.Layout 可选

布局。

animate boolean true 可选

是否开启动画。

autoResize boolean true 可选

当视口变换时,是否自动重绘。

defaultNode KnowledgeGraph.NodeStyle 可选

默认状态下节点的配置,比如 type, size, color。会被写入的 data 覆盖。

defaultEdge KnowledgeGraph.EdgeStyle 可选

默认状态下边的配置,比如 type, size, color。会被写入的 data 覆盖。

nodeHighlightStyle KnowledgeGraph.NodeStyle 可选

鼠标移入节点高亮样式。默认样式:{strokeColor: 'blue',stroke: 10, opacity: 0.8}。

edgeHighlightStyle KnowledgeGraph.EdgeStyle 可选

鼠标移入边高亮样式。默认样式:{strokeColor: 'blue',stroke: 10, opacity: 0.8}。

highlightNode boolean true 可选

鼠标移入是否高亮节点。

highlightEdge boolean true 可选

鼠标移入是否高亮边。

showToolBar boolean true 可选

是否打开工具条,包含放大,缩小,切换到实际大小功能。

showContextMenu boolean true 可选

是否打开节点的右键菜单,包含展开\折叠、隐藏功能。

dragCanvas boolean true 可选

是否可以拖拽 canvas。

zoomCanvas boolean true 可选

是否可以缩放 canvas。

dragNode boolean true 可选

是否可以拖拽 node 节点。

nodeLabelMaxWidth number 可选

node 节点的标签开启省略号配置项,大于该宽度使用省略号。

DataObject

创建 graph 实例的数据项。

Properties:
Name Type Description
data.nodes Array.<KnowledgeGraph.Node>

创建 graph 节点。

data.edges Array.<KnowledgeGraph.Edge>

创建 graph 边。

EdgeObject

edge 边配置项。

Properties:
Name Type Default Description
source string 可选

起始点 ID。

target string 可选

结束点 ID。

sourceAnchor number 可选

边的起始节点上的锚点的索引值。

targetAnchor number 可选

边的终止节点上的锚点的索引值。

type string 'line' 可选

指定边的类型,可以是内置边的类型名称,也可以是自定义边的名称。默认为 'line'。可选值 ['line','arc','polyline','quadratic']。

label string 可选

文本文字,如果没有则不会显示。

labelCfg KnowledgeGraph.EdgeLabelCfg 可选

配置标签文本。

style KnowledgeGraph.EdgeStyle 可选

通过 style 配置来修改边的填充色、边框颜色、阴影等属性,具体配置属性见:图形样式属性。

EdgeLabelCfgObject

node 节点配置项。

Properties:
Name Type Default Description
position string 可选

文本相对于边的位置,目前支持的位置有:'start','middle','end'。默认为'middle'。

refX number 可选

标签在 x 方向的偏移量。

refY number 可选

标签在 y 方向的偏移量。

autoRotate boolean true 可选

标签文字是否跟随边旋转,默认:true。

style KnowledgeGraph.TextStyle 可选

标签的样式属性,默认:{fontSize: 3,fill: '#333'}。

EdgeStyleObject

边样式通用配置项。

Properties:
Name Type Default Description
stroke string 可选

边的颜色。

lineWidth number 可选

边宽度。

lineAppendWidth number 可选

边响应鼠标事件时的检测宽度,当 lineWidth 太小而不易选中时,可以通过该参数提升击中范围。

endArrow boolean | Object true 可选

为 true 时在边的结束端绘制默认箭头,为 false 时不绘制结束端箭头,默认值 {path: 'M 0,0 L 2,1 L 2,-1 Z'}。

startArrow boolean | Object 可选

为 true 时在边的开始端绘制默认箭头,为 false 时不绘制结束端箭头。

strokeOpacity number 可选

边透明度。

shadowColor string 可选

阴影颜色。

shadowBlur number 可选

阴影模糊程度。

shadowOffsetX number 可选

阴影 x 方向偏移量。

shadowOffsetY number 可选

阴影 y 方向偏移量。

lineDash Array.<number> 可选

设置线的虚线样式,可以指定一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

cursor string 可选

鼠标在该边上时的鼠标样式,CSS 的 cursor 选项都支持。

highlightParamsObject

高亮节点、边的参数, 默认高亮样式和hover高亮样式一致。

Properties:
Name Type Description
nodeIDs Array

高亮节点id数组。

edgeIDs Array

高亮边id数组。

nodeStateStyles KnowledgeGraph.NodeStyle 可选

高亮节点样式。

edgeStateStyles KnowledgeGraph.EdgeStyle 可选

高亮边样式。

LayoutObject

布局。

Properties:
Name Type Default Description
type string 'fruchterman' 可选

布局类型, 可选值:['fruchterman']。 默认'fruchterman'。

NodeObject

node 节点配置项。

Properties:
Name Type Default Description
id string

元素的标识 ID,必须是唯一的 string。

category string 可选

分类。

x number 可选

x 坐标。

y number 可选

y 坐标。

size number 20 可选

节点的大小。

anchorPoints Array.<number> | number 20 可选

指定边连入节点的连接点的位置(相对于该节点而言),可以为空。例如: [0, 0],代表节点左上角的锚点,[1, 1],代表节点右下角的锚点。

type string 可选

元素的类型,不传则使用默认值,节点默认类型为 'circle'。可选值['circle','rect','ellipse','diamond', 'image']

label string 可选

元素的文本标签,有该字段时默认会渲染 label。

labelCfg KnowledgeGraph.NodeLabelCfg 可选

元素文本标签的配置项,详见各子模块内容。

style KnowledgeGraph.NodeStyle 可选

样式属性。

NodeLabelCfgObject

node 节点配置项。

Properties:
Name Type Description
position string 可选

文本相对于节点的位置,目前支持的位置有:'center','top','left','right','bottom'。默认为 'center'。modelRect 节点不支持该属性。

style KnowledgeGraph.TextStyle 可选

标签的样式属性。

offset number 可选

文本的偏移,position 为 'bottom' 时,文本的上方偏移量;position 为 'left' 时,文本的右方偏移量;以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距。

NodeStyleObject

节点样式通用配置项。

Properties:
Name Type Description
fill string 可选

节点填充色。

stroke string 可选

节点的描边颜色。

lineWidth number 可选

描边宽度。

lineDash Array.<number> 可选

描边虚线,数组代表实、虚长度。

fillOpacity number 可选

设置填充的 alpha 或透明值。

shadowColor string 可选

阴影颜色。

shadowBlur number 可选

阴影范围。

shadowOffsetX number 可选

阴影 x 方向偏移量。

shadowOffsetY number 可选

阴影 y 方向偏移量。

opacity number 可选

设置绘图的当前 alpha 或透明值。

cursor string 可选

鼠标在该边上时的鼠标样式,CSS 的 cursor 选项都支持。

TextStyleObject

文本样式。

Properties:
Name Type Description
textAlign string 可选

设置文本内容的当前对齐方式。支持的属性:center / end / left / right / start,默认值为 start。

textBaseline string 可选

设置在绘制文本时使用的当前文本基线。支持的属性:top / middle / bottom / alphabetic / hanging。默认值为 bottom。

fontStyle string 可选

字体样式。对应 font-style。

fontVariant string 可选

设置为小型大写字母字体。对应 font-variant。

fontWeight number 可选

字体粗细。对应 font-weight。

fontSize number 可选

字体大小。对应 font-size,边标签文本默认大小是 7。

fontFamily string 可选

字体系列。对应 font-family。

lineHeight number 可选

行高。对应 line-height。