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);
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。