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 queryResultObject SuperMap iServer 知识图谱服务 query 数据。
graphMapObject 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 queryResultObject SuperMap iServer 知识图谱服务 query 数据。
Returns:
Type Description KnowledgeGraph.Data 返回数据。 -
addItem(type, model)
common/overlay/KnowledgeGraph.js, line 821 -
新增元素(节点和边)。
Name Type Description typestring 元素类型,可选值为 'node'、'edge'。
modelObject 元素的数据模型,具体内容参见元素配置项。
-
autoResize()
common/overlay/KnowledgeGraph.js, line 383 -
浏览器窗口大小发生改变时,重新设置 canvas 画布的大小,重新渲染。
-
changeSize(width, height)
common/overlay/KnowledgeGraph.js, line 584 -
改变画布大小。
Name Type Description widthnumber 宽度。
heightnumber 高度。
-
changeVisibility(item, visible)
common/overlay/KnowledgeGraph.js, line 791 -
更改元素是否显示。
Name Type Description itemObject 元素实例。
visibleboolean 是否显示元素,true 为显示,false 为隐藏。
-
clear(graph)
common/overlay/KnowledgeGraph.js, line 940 -
清除画布元素。
Name Type Default Description graphObject this.graph 可选 graph 实例。
-
clearHighlight(params)
common/overlay/KnowledgeGraph.js, line 261 -
取消之前高亮节点和边。
Name Type Description paramsKnowledgeGraph.clearHighlightParams 可选 取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。
- Version:
- 11.2.0
-
collapseNode(id)
common/overlay/KnowledgeGraph.js, line 743 -
收起当前节点。
Name Type Description idstring 元素 ID。
-
collapseNodes(collapseData)
common/overlay/KnowledgeGraph.js, line 321 -
折叠节点。
Name Type Description collapseDataArray.<string> 元素 ID 数组。
-
createGraph(config){Object}
common/overlay/KnowledgeGraph.js, line 361 -
创建 KnowledgeGraph 的 graph 实例。
Name Type Description configObject graph 配置项。
Returns:
Type Description Object graph 实例。 -
destroy(graph)
common/overlay/KnowledgeGraph.js, line 949 -
销毁画布。
Name Type Default Description graphObject this.graph 可选 graph 实例。
-
expandNode(id)
common/overlay/KnowledgeGraph.js, line 733 -
展开当前节点。
Name Type Description idstring 元素 ID。
-
expandNodes(expandData)
common/overlay/KnowledgeGraph.js, line 307 -
展开节点。
Name Type Description expandDataArray.<string> 元素 ID 数组。
-
find(type, fn){Object}
common/overlay/KnowledgeGraph.js, line 662 -
获取邻居节点数组。
Name Type Description typestring 元素类型,可选值为 'node'、'edge'。
fnfunction 查找的规则。
Returns:
Type Description Object 如果有符合规则的元素实例,则返回第一个匹配的元素实例,否则返回 undefined。 -
findAll(type, fn){Object}
common/overlay/KnowledgeGraph.js, line 672 -
获取邻居节点数组。
Name Type Description typestring 元素类型,可选值为 'node'、'edge'。
fnfunction 查找的规则。
Returns:
Type Description Object 如果有符合规则的元素实例,则返回所有元素实例,否则返回 undefined。 -
findById(id){Object}
common/overlay/KnowledgeGraph.js, line 652 -
根据 ID,查询对应的元素实例。
Name Type Description idstring 元素 ID。
Returns:
Type Description Object 如果有符合规则的元素实例,则返回第一个匹配的元素实例,否则返回 undefined。 -
fitCenter(animate, animateCfg)
common/overlay/KnowledgeGraph.js, line 429 -
平移图到中心将对齐到画布中心,但不缩放。优先级低于 fitView。
Name Type Description animateboolean 可选 是否开启动画。
animateCfgKnowledgeGraph.AnimateConfig 可选 若带有动画,可配置动画,参见基础动画教程。若未配置,则跟随 graph 的 animateCfg 参数。
-
fitView(padding, rules, animate, animateCfg)
common/overlay/KnowledgeGraph.js, line 417 -
让画布内容适应视口。
Name Type Description paddingArray.<number> | number 可选 [top, right, bottom, left] 四个方向上的间距值。
rulesObject 可选 fitView 的规则,参数如下:{ onlyOutOfViewPort?: boolean; direction?: 'x' / 'y' / 'both'; ratioRule?: 'max' / 'min}。
animateboolean 可选 是否开启动画。
animateCfgKnowledgeGraph.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 nodeObject 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 nodeObject 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 itemObject 元素实例。
Returns:
Type Description Object - 返回值为节点的数据模型。
-
getNeighbors(node, type){Array}
common/overlay/KnowledgeGraph.js, line 641 -
获取邻居节点数组。
Name Type Description nodestring | INode 节点 ID 或节点实例。
typestring | 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 nodeObject node 实例。
Returns:
Type Description Array edge 实例数组。 -
getSourceByEdge(edge){Object}
common/overlay/KnowledgeGraph.js, line 713 -
获取当前边的起始节点
Name Type Description edgeObject node 实例。
Returns:
Type Description Object 返回值为起始节点的实例。 -
getTargetByEdge(edge){Object}
common/overlay/KnowledgeGraph.js, line 723 -
获取当前边的终止节点。
Name Type Description edgeObject 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 dataObject 展开、折叠、隐藏的对象,eg: {expand:['id1'], collapse:['id2'], hidden:['id3']}。
-
hide(item)
common/overlay/KnowledgeGraph.js, line 782 -
隐藏元素。只隐藏 item 自身,若需要在隐藏节点的同时隐藏相关边,应调用 hideItem(item)。
Name Type Description itemObject 元素实例。
-
hideItem(item, stack)
common/overlay/KnowledgeGraph.js, line 763 -
隐藏指定元素。若 item 为节点,则相关边也会随之隐藏。而 hide() 则将只隐藏自身。
Name Type Description itemstring | Object 元素 ID 或元素实例。
stackboolean 可选 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可。
-
hideNodes(hiddenData)
common/overlay/KnowledgeGraph.js, line 335 -
隐藏节点。
Name Type Description hiddenDataArray.<string> 元素 ID 数组。
-
highlight(params)
common/overlay/KnowledgeGraph.js, line 231 -
高亮节点和边。
Name Type Description paramsKnowledgeGraph.highlightParams 高亮参数。
- Version:
- 11.2.0
-
initGraph(config){Object}
common/overlay/KnowledgeGraph.js, line 520 -
创建 KnowledgeGraph 实例。
Name Type Description configObject graph 配置项。
Returns:
Type Description Object graph 实例。 -
isVisible(item){boolean}
common/overlay/KnowledgeGraph.js, line 801 -
查询元素显示状态。
Name Type Description itemObject 元素实例。
Returns:
Type Description boolean - 返回值为 true,则表示当前元素处于显示状态,否则处于隐藏状态。
-
nodeLabelOpenEllipsis(nodeLabelMaxWidth, nodes){Array}
common/overlay/KnowledgeGraph.js, line 916 -
转换 label 的省略号。
Name Type Description nodeLabelMaxWidthObject node 节点标签是否开启省略号。
nodesObject graph 的 nodes 数据。
Returns:
Type Description Array nodes -
off(eventName, handler)
common/overlay/KnowledgeGraph.js, line 895 -
graph 关闭事件。
Name Type Description eventNamestring 事件名,参考 on 方法的事件名。
handlerfunction 监听函数。
-
on(eventName, handler)
common/overlay/KnowledgeGraph.js, line 867 -
graph 监听事件。
Name Type Description eventNamestring 事件名,可选事件名参见: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 均会触发该事件handlerfunction 监听函数。
-
refresh()
common/overlay/KnowledgeGraph.js, line 576 -
改变画布大小。
-
refreshItem(item)
common/overlay/KnowledgeGraph.js, line 850 -
刷新指定元素。
Name Type Description itemstring | Object 元素 ID 或元素实例。
-
refreshPositions()
common/overlay/KnowledgeGraph.js, line 859 -
当节点位置发生变化时,刷新所有节点位置,并重计算边的位置。
-
removeItem(item)
common/overlay/KnowledgeGraph.js, line 831 -
删除元素。
Name Type Description itemstring | Object 元素 ID 或元素实例。
-
render(graph)
common/overlay/KnowledgeGraph.js, line 557 -
根据提供的数据渲染视图。
Name Type Default Description graphObject this.graph 可选 graph 实例。
-
resize(width, height)
common/overlay/KnowledgeGraph.js, line 594 -
改变画布大小后,重新渲染。
Name Type Description widthnumber 宽度。
heightnumber 高度。
-
setData(data, graph)
common/overlay/KnowledgeGraph.js, line 541 -
设置默认数据。
Name Type Default Description dataKnowledgeGraph.Data graph 数据。
graphObject this.graph 可选 graph 实例。
-
setMaxZoom(ratio)
common/overlay/KnowledgeGraph.js, line 493 -
设置 graph 当前允许的最大缩放比例。
Name Type Description rationumber 缩放比例。
-
setMinZoom(ratio)
common/overlay/KnowledgeGraph.js, line 475 -
设置 graph 当前允许的最小缩放比例。
Name Type Description rationumber 缩放比例。
-
show(item)
common/overlay/KnowledgeGraph.js, line 773 -
显示元素。只显示 item 自身,若需要在显示节点的同时显示相关边,应调用 showItem(item)。
Name Type Description itemObject 元素实例。
-
showItem(item, stack)
common/overlay/KnowledgeGraph.js, line 753 -
显示指定的元素。若 item 为节点,则相关边也会随之显示。而 show() 则将只显示自身。
Name Type Description itemstring | Object 元素 ID 或元素实例。
stackboolean 可选 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可。
-
toDataURL(type, backgroundColor){string}
common/overlay/KnowledgeGraph.js, line 905 -
转换成图片。
Name Type Description typestring 图片类型 'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'。
backgroundColorstring 可选 图片的背景色,可选,不传值时将导出透明背景的图片。
Returns:
Type Description string 返回值表示生成的图片的 URL。 -
updateGraph(data, graph)
common/overlay/KnowledgeGraph.js, line 566 -
更新数据。
Name Type Default Description dataKnowledgeGraph.Data graph 数据。
graphObject this.graph 可选 graph 实例。
-
updateItem(item, model)
common/overlay/KnowledgeGraph.js, line 840 -
更新元素,包括更新数据、样式等。
Name Type Description itemstring | Object 元素 ID 或元素实例。
modelObject 元素的数据模型,具体内容参见元素配置项。
-
zoom(ratio, center, animate, animateCfg)
common/overlay/KnowledgeGraph.js, line 393 -
改变视口的缩放比例,在当前画布比例下缩放,是相对比例。
Name Type Description rationumber 缩放比例。
centerObject 可选 以 center 的 x、y 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放。
animateboolean 可选 是否开启动画。
animateCfgKnowledgeGraph.AnimateConfig 可选 若带有动画,可配置动画。若未配置,则跟随 graph 的 animateCfg 参数。
-
zoomTo(ratio, center, animate, animateCfg)
common/overlay/KnowledgeGraph.js, line 405 -
改变视口的缩放比例,在当前画布比例下缩放,是相对比例。
Name Type Description rationumber 缩放比例。
centerObject 可选 以 center 的 x、y 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放。
animateboolean 可选 是否开启动画。
animateCfgKnowledgeGraph.AnimateConfig 可选 若带有动画,可配置动画。若未配置,则跟随 graph 的 animateCfg 参数。
Type Definitions
-
AnimateConfigObject
-
动画配置项。
Properties:
Name Type Default Description durationnumber 500 可选 一次动画的时长。
easingstring 'linearEasing' 可选 动画函数。
delaynumber 0 可选 是否重复执行动画。
repeatboolean false 可选 边透明度。
shadowColorstring 可选 阴影颜色。
-
clearHighlightParamsObject
-
取消高亮节点、边的参数。
Properties:
Name Type Description nodeIDsArray 高亮节点id数组。
edgeIDsArray 高亮边id数组。
-
ConfigObject
-
创建 graph 实例的配置项。
Properties:
Name Type Default Description containerstring | HTMLElement 创建的容器 ID 或容器本身,默认是 'knowledgeGraph'。
widthnumber 图的宽度,默认是 container 的 width。
heightnumber 图的高度,默认是 container 的 height。
centerArray.<number> 可选 中心点的渲染坐标。可以通过 KnowledgeGraph.prototype.getViewPortCenterPoint 获取。
zoomnumber 可选 缩放比例。
minZoomnumber 可选 最小缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例小于该值,则将使用该值进行缩放,并返回 false。
maxZoomnumber 可选 最大缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例大于该值,则将使用该值进行缩放,并返回 false。
layoutKnowledgeGraph.Layout 可选 布局。
animateboolean true 可选 是否开启动画。
autoResizeboolean true 可选 当视口变换时,是否自动重绘。
defaultNodeKnowledgeGraph.NodeStyle 可选 默认状态下节点的配置,比如 type, size, color。会被写入的 data 覆盖。
defaultEdgeKnowledgeGraph.EdgeStyle 可选 默认状态下边的配置,比如 type, size, color。会被写入的 data 覆盖。
nodeHighlightStyleKnowledgeGraph.NodeStyle 可选 鼠标移入节点高亮样式。默认样式:{strokeColor: 'blue',stroke: 10, opacity: 0.8}。
edgeHighlightStyleKnowledgeGraph.EdgeStyle 可选 鼠标移入边高亮样式。默认样式:{strokeColor: 'blue',stroke: 10, opacity: 0.8}。
highlightNodeboolean true 可选 鼠标移入是否高亮节点。
highlightEdgeboolean true 可选 鼠标移入是否高亮边。
showToolBarboolean true 可选 是否打开工具条,包含放大,缩小,切换到实际大小功能。
showContextMenuboolean true 可选 是否打开节点的右键菜单,包含展开\折叠、隐藏功能。
dragCanvasboolean true 可选 是否可以拖拽 canvas。
zoomCanvasboolean true 可选 是否可以缩放 canvas。
dragNodeboolean true 可选 是否可以拖拽 node 节点。
nodeLabelMaxWidthnumber 可选 node 节点的标签开启省略号配置项,大于该宽度使用省略号。
-
DataObject
-
创建 graph 实例的数据项。
Properties:
Name Type Description data.nodesArray.<KnowledgeGraph.Node> 创建 graph 节点。
data.edgesArray.<KnowledgeGraph.Edge> 创建 graph 边。
-
EdgeObject
-
edge 边配置项。
Properties:
Name Type Default Description sourcestring 可选 起始点 ID。
targetstring 可选 结束点 ID。
sourceAnchornumber 可选 边的起始节点上的锚点的索引值。
targetAnchornumber 可选 边的终止节点上的锚点的索引值。
typestring 'line' 可选 指定边的类型,可以是内置边的类型名称,也可以是自定义边的名称。默认为 'line'。可选值 ['line','arc','polyline','quadratic']。
labelstring 可选 文本文字,如果没有则不会显示。
labelCfgKnowledgeGraph.EdgeLabelCfg 可选 配置标签文本。
styleKnowledgeGraph.EdgeStyle 可选 通过 style 配置来修改边的填充色、边框颜色、阴影等属性,具体配置属性见:图形样式属性。
-
EdgeLabelCfgObject
-
node 节点配置项。
Properties:
Name Type Default Description positionstring 可选 文本相对于边的位置,目前支持的位置有:'start','middle','end'。默认为'middle'。
refXnumber 可选 标签在 x 方向的偏移量。
refYnumber 可选 标签在 y 方向的偏移量。
autoRotateboolean true 可选 标签文字是否跟随边旋转,默认:true。
styleKnowledgeGraph.TextStyle 可选 标签的样式属性,默认:{fontSize: 3,fill: '#333'}。
-
EdgeStyleObject
-
边样式通用配置项。
Properties:
Name Type Default Description strokestring 可选 边的颜色。
lineWidthnumber 可选 边宽度。
lineAppendWidthnumber 可选 边响应鼠标事件时的检测宽度,当 lineWidth 太小而不易选中时,可以通过该参数提升击中范围。
endArrowboolean | Object true 可选 为 true 时在边的结束端绘制默认箭头,为 false 时不绘制结束端箭头,默认值 {path: 'M 0,0 L 2,1 L 2,-1 Z'}。
startArrowboolean | Object 可选 为 true 时在边的开始端绘制默认箭头,为 false 时不绘制结束端箭头。
strokeOpacitynumber 可选 边透明度。
shadowColorstring 可选 阴影颜色。
shadowBlurnumber 可选 阴影模糊程度。
shadowOffsetXnumber 可选 阴影 x 方向偏移量。
shadowOffsetYnumber 可选 阴影 y 方向偏移量。
lineDashArray.<number> 可选 设置线的虚线样式,可以指定一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
cursorstring 可选 鼠标在该边上时的鼠标样式,CSS 的 cursor 选项都支持。
-
highlightParamsObject
-
高亮节点、边的参数, 默认高亮样式和hover高亮样式一致。
Properties:
Name Type Description nodeIDsArray 高亮节点id数组。
edgeIDsArray 高亮边id数组。
nodeStateStylesKnowledgeGraph.NodeStyle 可选 高亮节点样式。
edgeStateStylesKnowledgeGraph.EdgeStyle 可选 高亮边样式。
-
LayoutObject
-
布局。
Properties:
Name Type Default Description typestring 'fruchterman' 可选 布局类型, 可选值:['fruchterman']。 默认'fruchterman'。
-
NodeObject
-
node 节点配置项。
Properties:
Name Type Default Description idstring 元素的标识 ID,必须是唯一的 string。
categorystring 可选 分类。
xnumber 可选 x 坐标。
ynumber 可选 y 坐标。
sizenumber 20 可选 节点的大小。
anchorPointsArray.<number> | number 20 可选 指定边连入节点的连接点的位置(相对于该节点而言),可以为空。例如: [0, 0],代表节点左上角的锚点,[1, 1],代表节点右下角的锚点。
typestring 可选 元素的类型,不传则使用默认值,节点默认类型为 'circle'。可选值['circle','rect','ellipse','diamond', 'image']
labelstring 可选 元素的文本标签,有该字段时默认会渲染 label。
labelCfgKnowledgeGraph.NodeLabelCfg 可选 元素文本标签的配置项,详见各子模块内容。
styleKnowledgeGraph.NodeStyle 可选 样式属性。
-
NodeLabelCfgObject
-
node 节点配置项。
Properties:
Name Type Description positionstring 可选 文本相对于节点的位置,目前支持的位置有:'center','top','left','right','bottom'。默认为 'center'。modelRect 节点不支持该属性。
styleKnowledgeGraph.TextStyle 可选 标签的样式属性。
offsetnumber 可选 文本的偏移,position 为 'bottom' 时,文本的上方偏移量;position 为 'left' 时,文本的右方偏移量;以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距。
-
NodeStyleObject
-
节点样式通用配置项。
Properties:
Name Type Description fillstring 可选 节点填充色。
strokestring 可选 节点的描边颜色。
lineWidthnumber 可选 描边宽度。
lineDashArray.<number> 可选 描边虚线,数组代表实、虚长度。
fillOpacitynumber 可选 设置填充的 alpha 或透明值。
shadowColorstring 可选 阴影颜色。
shadowBlurnumber 可选 阴影范围。
shadowOffsetXnumber 可选 阴影 x 方向偏移量。
shadowOffsetYnumber 可选 阴影 y 方向偏移量。
opacitynumber 可选 设置绘图的当前 alpha 或透明值。
cursorstring 可选 鼠标在该边上时的鼠标样式,CSS 的 cursor 选项都支持。
-
TextStyleObject
-
文本样式。
Properties:
Name Type Description textAlignstring 可选 设置文本内容的当前对齐方式。支持的属性:center / end / left / right / start,默认值为 start。
textBaselinestring 可选 设置在绘制文本时使用的当前文本基线。支持的属性:top / middle / bottom / alphabetic / hanging。默认值为 bottom。
fontStylestring 可选 字体样式。对应 font-style。
fontVariantstring 可选 设置为小型大写字母字体。对应 font-variant。
fontWeightnumber 可选 字体粗细。对应 font-weight。
fontSizenumber 可选 字体大小。对应 font-size,边标签文本默认大小是 7。
fontFamilystring 可选 字体系列。对应 font-family。
lineHeightnumber 可选 行高。对应 line-height。