-
引入 sf-relation
yarn add sf-relation -
项目中引入
import 'sf-relation/sf-relation.min.css';import SeeksRelationGraph from 'sf-relation'; -
vue3 样例代码
<template>
<div>
<div style="height:calc(100vh - 50px);">
<RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
</div>
</div>
</template>
<script>
import 'sf-relation/sf-relation.min.css';
import SeeksRelationGraph from 'sf-relation';
export default defineComponent({
name: 'App',
components: { SeeksRelationGraph },
setup() {
const seeksRelationGraph = ref(null);
let graphOptions = reactive({
backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
backgrounImageNoRepeat: true,
layouts: [
{
label: '中心',
layoutName: 'tree',
layoutClassName: 'seeks-layout-center',
defaultJunctionPoint: 'border',
defaultNodeShape: 0,
defaultLineShape: 1,
from: 'left',
max_per_width: '300',
min_per_height: '40'
}
],
defaultLineMarker: {
markerWidth: 12,
markerHeight: 12,
refX: 6,
refY: 6,
data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
},
defaultNodeShape: 1,
defaultNodeWidth: '100',
defaultLineShape: 2,
defaultJunctionPoint: 'lr',
defaultNodeBorderWidth: 0,
defaultLineColor: 'rgba(0, 186, 189, 1)',
defaultNodeColor: 'rgba(0, 206, 209, 1)'
});
onMounted(() => {
showSeeksGraph();
});
function showSeeksGraph() {
var __graph_json_data = {
rootId: 'a',
nodes: [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'b1', text: 'b1' },
{ id: 'b1-1', text: 'b1-1' },
{ id: 'b1-2', text: 'b1-2' },
{ id: 'b1-3', text: 'b1-3' },
{ id: 'b1-4', text: 'b1-4' },
{ id: 'b1-5', text: 'b1-5' },
{ id: 'b1-6', text: 'b1-6' },
{ id: 'b2', text: 'b2' },
{ id: 'b2-1', text: 'b2-1' },
{ id: 'b2-2', text: 'b2-2' },
{ id: 'b2-3', text: 'b2-3' },
{ id: 'b2-4', text: 'b2-4' },
{ id: 'b3', text: 'b3' },
{ id: 'b3-1', text: 'b3-1' },
{ id: 'b3-2', text: 'b3-2' },
{ id: 'b3-3', text: 'b3-3' },
{ id: 'b3-4', text: 'b3-4' },
{ id: 'b3-5', text: 'b3-5' },
{ id: 'b3-6', text: 'b3-6' },
{ id: 'b3-7', text: 'b3-7' },
{ id: 'b4', text: 'b4' },
{ id: 'b4-1', text: 'b4-1' },
{ id: 'b4-2', text: 'b4-2' },
{ id: 'b4-3', text: 'b4-3' },
{ id: 'b4-4', text: 'b4-4' },
{ id: 'b4-5', text: 'b4-5' },
{ id: 'b4-6', text: 'b4-6' },
{ id: 'b4-7', text: 'b4-7' },
{ id: 'b4-8', text: 'b4-8' },
{ id: 'b4-9', text: 'b4-9' },
{ id: 'b5', text: 'b5' },
{ id: 'b5-1', text: 'b5-1' },
{ id: 'b5-2', text: 'b5-2' },
{ id: 'b5-3', text: 'b5-3' },
{ id: 'b5-4', text: 'b5-4' },
{ id: 'b6', text: 'b6' },
{ id: 'b6-1', text: 'b6-1' },
{ id: 'b6-2', text: 'b6-2' },
{ id: 'b6-3', text: 'b6-3' },
{ id: 'b6-4', text: 'b6-4' },
{ id: 'b6-5', text: 'b6-5' },
{ id: 'c', text: 'c' },
{ id: 'c1', text: 'c1' },
{ id: 'c1-1', text: 'c1-1' },
{ id: 'c1-2', text: 'c1-2' },
{ id: 'c1-3', text: 'c1-3' },
{ id: 'c1-4', text: 'c1-4' },
{ id: 'c1-5', text: 'c1-5' },
{ id: 'c1-6', text: 'c1-6' },
{ id: 'c1-7', text: 'c1-7' },
{ id: 'c2', text: 'c2' },
{ id: 'c2-1', text: 'c2-1' },
{ id: 'c2-2', text: 'c2-2' },
{ id: 'c3', text: 'c3' },
{ id: 'c3-1', text: 'c3-1' },
{ id: 'c3-2', text: 'c3-2' },
{ id: 'c3-3', text: 'c3-3' },
{ id: 'd', text: 'd' },
{ id: 'd1', text: 'd1' },
{ id: 'd1-1', text: 'd1-1' },
{ id: 'd1-2', text: 'd1-2' },
{ id: 'd1-3', text: 'd1-3' },
{ id: 'd1-4', text: 'd1-4' },
{ id: 'd1-5', text: 'd1-5' },
{ id: 'd1-6', text: 'd1-6' },
{ id: 'd1-7', text: 'd1-7' },
{ id: 'd1-8', text: 'd1-8' },
{ id: 'd2', text: 'd2' },
{ id: 'd2-1', text: 'd2-1' },
{ id: 'd2-2', text: 'd2-2' },
{ id: 'd3', text: 'd3' },
{ id: 'd3-1', text: 'd3-1' },
{ id: 'd3-2', text: 'd3-2' },
{ id: 'd3-3', text: 'd3-3' },
{ id: 'd3-4', text: 'd3-4' },
{ id: 'd3-5', text: 'd3-5' },
{ id: 'd4', text: 'd4' },
{ id: 'd4-1', text: 'd4-1' },
{ id: 'd4-2', text: 'd4-2' },
{ id: 'd4-3', text: 'd4-3' },
{ id: 'd4-4', text: 'd4-4' },
{ id: 'd4-5', text: 'd4-5' },
{ id: 'd4-6', text: 'd4-6' },
{ id: 'e', text: 'e' },
{ id: 'e1', text: 'e1' },
{ id: 'e1-1', text: 'e1-1' },
{ id: 'e1-2', text: 'e1-2' },
{ id: 'e1-3', text: 'e1-3' },
{ id: 'e1-4', text: 'e1-4' },
{ id: 'e1-5', text: 'e1-5' },
{ id: 'e1-6', text: 'e1-6' },
{ id: 'e2', text: 'e2' },
{ id: 'e2-1', text: 'e2-1' },
{ id: 'e2-2', text: 'e2-2' },
{ id: 'e2-3', text: 'e2-3' },
{ id: 'e2-4', text: 'e2-4' },
{ id: 'e2-5', text: 'e2-5' },
{ id: 'e2-6', text: 'e2-6' },
{ id: 'e2-7', text: 'e2-7' },
{ id: 'e2-8', text: 'e2-8' },
{ id: 'e2-9', text: 'e2-9' }
],
links: [
{ from: 'a', to: 'b' },
{ from: 'b', to: 'b1' },
{ from: 'b1', to: 'b1-1' },
{ from: 'b1', to: 'b1-2' },
{ from: 'b1', to: 'b1-3' },
{ from: 'b1', to: 'b1-4' },
{ from: 'b1', to: 'b1-5' },
{ from: 'b1', to: 'b1-6' },
{ from: 'b', to: 'b2' },
{ from: 'b2', to: 'b2-1' },
{ from: 'b2', to: 'b2-2' },
{ from: 'b2', to: 'b2-3' },
{ from: 'b2', to: 'b2-4' },
{ from: 'b', to: 'b3' },
{ from: 'b3', to: 'b3-1' },
{ from: 'b3', to: 'b3-2' },
{ from: 'b3', to: 'b3-3' },
{ from: 'b3', to: 'b3-4' },
{ from: 'b3', to: 'b3-5' },
{ from: 'b3', to: 'b3-6' },
{ from: 'b3', to: 'b3-7' },
{ from: 'b', to: 'b4' },
{ from: 'b4', to: 'b4-1' },
{ from: 'b4', to: 'b4-2' },
{ from: 'b4', to: 'b4-3' },
{ from: 'b4', to: 'b4-4' },
{ from: 'b4', to: 'b4-5' },
{ from: 'b4', to: 'b4-6' },
{ from: 'b4', to: 'b4-7' },
{ from: 'b4', to: 'b4-8' },
{ from: 'b4', to: 'b4-9' },
{ from: 'b', to: 'b5' },
{ from: 'b5', to: 'b5-1' },
{ from: 'b5', to: 'b5-2' },
{ from: 'b5', to: 'b5-3' },
{ from: 'b5', to: 'b5-4' },
{ from: 'b', to: 'b6' },
{ from: 'b6', to: 'b6-1' },
{ from: 'b6', to: 'b6-2' },
{ from: 'b6', to: 'b6-3' },
{ from: 'b6', to: 'b6-4' },
{ from: 'b6', to: 'b6-5' },
{ from: 'a', to: 'c' },
{ from: 'c', to: 'c1' },
{ from: 'c1', to: 'c1-1' },
{ from: 'c1', to: 'c1-2' },
{ from: 'c1', to: 'c1-3' },
{ from: 'c1', to: 'c1-4' },
{ from: 'c1', to: 'c1-5' },
{ from: 'c1', to: 'c1-6' },
{ from: 'c1', to: 'c1-7' },
{ from: 'c', to: 'c2' },
{ from: 'c2', to: 'c2-1' },
{ from: 'c2', to: 'c2-2' },
{ from: 'c', to: 'c3' },
{ from: 'c3', to: 'c3-1' },
{ from: 'c3', to: 'c3-2' },
{ from: 'c3', to: 'c3-3' },
{ from: 'a', to: 'd' },
{ from: 'd', to: 'd1' },
{ from: 'd1', to: 'd1-1' },
{ from: 'd1', to: 'd1-2' },
{ from: 'd1', to: 'd1-3' },
{ from: 'd1', to: 'd1-4' },
{ from: 'd1', to: 'd1-5' },
{ from: 'd1', to: 'd1-6' },
{ from: 'd1', to: 'd1-7' },
{ from: 'd1', to: 'd1-8' },
{ from: 'd', to: 'd2' },
{ from: 'd2', to: 'd2-1' },
{ from: 'd2', to: 'd2-2' },
{ from: 'd', to: 'd3' },
{ from: 'd3', to: 'd3-1' },
{ from: 'd3', to: 'd3-2' },
{ from: 'd3', to: 'd3-3' },
{ from: 'd3', to: 'd3-4' },
{ from: 'd3', to: 'd3-5' },
{ from: 'd', to: 'd4' },
{ from: 'd4', to: 'd4-1' },
{ from: 'd4', to: 'd4-2' },
{ from: 'd4', to: 'd4-3' },
{ from: 'd4', to: 'd4-4' },
{ from: 'd4', to: 'd4-5' },
{ from: 'd4', to: 'd4-6' },
{ from: 'a', to: 'e' },
{ from: 'e', to: 'e1' },
{ from: 'e1', to: 'e1-1' },
{ from: 'e1', to: 'e1-2' },
{ from: 'e1', to: 'e1-3' },
{ from: 'e1', to: 'e1-4' },
{ from: 'e1', to: 'e1-5' },
{ from: 'e1', to: 'e1-6' },
{ from: 'e', to: 'e2' },
{ from: 'e2', to: 'e2-1' },
{ from: 'e2', to: 'e2-2' },
{ from: 'e2', to: 'e2-3' },
{ from: 'e2', to: 'e2-4' },
{ from: 'e2', to: 'e2-5' },
{ from: 'e2', to: 'e2-6' },
{ from: 'e2', to: 'e2-7' },
{ from: 'e2', to: 'e2-8' },
{ from: 'e2', to: 'e2-9' }
]
};
seeksRelationGraph.value.setJsonData(__graph_json_data, (seeksRGGraph) => {
// Called when the relation-graph is completed
console.log('[sf-relation]完成', seeksRGGraph);
});
}
function onNodeClick(nodeObject, $event) {
console.log('onNodeClick:', nodeObject);
console.log('onNodeClick:', $event);
}
function onLineClick(lineObject, $event) {
console.log('onLineClick:', lineObject);
console.log('onNodeClick:', $event);
}
return {
graphOptions,
onNodeClick,
onLineClick,
seeksRelationGraph
};
}
});
</script>
-
图片
Arributes / 选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
options |
图谱配置，一个对象，里面包含了具体的选项：
|
Object
|
是
|
|
|
options.backgrounImage
|
string
|
否
|
||
|
options.backgrounImageNoRepeat
|
只在右下角显示水印，不重复显示水印
|
boolean
|
否
|
true
|
|
options.allowShowMiniToolBar
|
是否显示工具栏
|
boolean
|
否
|
true
|
|
options.allowShowMiniView
|
是否显示缩略图
|
boolean
|
否
|
false
|
|
options.allowShowMiniNameFilter
|
是否显示搜索框
|
boolean
|
否
|
true
|
|
options.allowSwitchLineShape
|
是否在工具栏中显示切换线条形状的按钮
|
boolean
|
否
|
true
|
|
options.allowSwitchJunctionPoint
|
是否在工具栏中显示切换连接点位置的按钮
|
boolean
|
否
|
false
|
|
options.disableZoom
|
是否禁用图谱的缩放功能，这里特指通过鼠标滚轮进行缩放的功能，禁用后你依然可以通过图谱工具栏按钮进行缩放
|
boolean
|
否
|
false
|
|
options.disableDragNode
|
是否禁用图谱中节点的拖动
|
boolean
|
否
|
false
|
|
options.moveToCenterWhenResize
|
当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
|
boolean
|
否
|
true
|
|
options.defaultFocusRootNode
|
默认为根节点添加一个被选中的样式
|
boolean
|
否
|
true
|
|
options.allowShowZoomMenu
|
是否在右侧菜单栏显示放大缩小的按钮，此设置和disableZoom不冲突
|
boolean
|
否
|
true
|
|
options.isMoveByParentNode
|
是否在拖动节点后让子节点跟随
|
boolean
|
否
|
false
|
|
options.hideNodeContentByZoom
|
是否根据缩放比例隐藏节点内容
|
boolean
|
否
|
false
|
|
options.defaultNodeShape
|
默认的节点形状，0:圆形；1:矩形
|
int
|
否
|
1
|
|
options.defaultNodeColor
|
默认的节点背景颜色
|
string
|
否
|
|
|
options.defaultNodeFontColor
|
默认的节点文字颜色
|
string
|
否
|
|
|
options.defaultNodeBorderColor
|
默认的节点边框颜色
|
string
|
否
|
|
|
options.defaultNodeBorderWidth
|
默认的节点边框粗细（像素）
|
int
|
否
|
1
|
|
options.defaultNodeWidth
|
默认的节点宽度
|
int
|
否
|
自动
|
|
options.defaultNodeHeight
|
默认的节点高度
|
int
|
否
|
自动
|
|
options.defaultJunctionPoint
|
默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
|
string
|
否
|
自动
|
|
options.defaultExpandHolderPosition
|
默认的节点展开/关闭按钮位置（left/top/right/bottom）
|
string
|
否
|
hide
|
|
options.defaultLineColor
|
默认的线条颜色
|
string
|
否
|
|
|
options.defaultLineWidth
|
默认的线条粗细（像素）
|
int
|
否
|
1
|
|
options.defaultLineShape
|
默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
options.defaultLineMarker
|
默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
|
Object
|
否
|
|
|
options.defaultShowLineLabel
|
默认是否显示连线文字
|
boolean
|
否
|
true
|
|
options.layouts
|
布局方式，可以设置多个布局，用于切换查看布局参数配置说明
|
Object/Array
|
否
|
中心布局
|
|
on-node-click
|
标签参数：点击节点时触发的方法，参数：(nodeObject, $event)
|
function
|
否
|
|
|
on-line-click
|
标签参数：点击连线时触发的方法，参数：(lineObject, $event)
|
function
|
否
|
Runtime-properties / 运行时属性:
|
属性名
|
说明
|
|---|---|
|
graphSetting
|
图片会根据options生成一个包含默认值的完整配置对象，它就是graphSetting，可以通过this.$refs.seeksRelationGraph.graphSetting来获取；你还可以从这个对象中获取当前图谱的可见区域大小、画布大小、画布偏移量、当前布局器等运行时对象。
|
Methods / 方法:
|
事件名
|
说明
|
参数
|
|---|---|---|
|
setOptions(options, callback)
|
设置/重新设置图谱的选项,options：图谱选项,不能为空;callback:当设置完成后的回调函数,可以为空;options选项设置方法示例：<SeeksRelationGraph
ref="seeksRelationGraph" :options="userGraphSetting" />
更改设置：seeksRelationGraph.setOptions(newOptions,
callback);
|
|
|
setJsonData(jsonData, callback)
|
设置/重新设置图谱中的数据,jsonData：图谱数据,不能为空，jsonData中需要包含三要素（rootId、nodes、links）数据格式示例;callback:当设置完成后的回调函数,可以为空;
|
|
|
appendJsonData(jsonData, callback)
|
向图谱中追加数据,jsonData：图谱数据,不能为空，数据格式示例;callback:当设置完成后的回调函数,可以为空;
|
|
|
refresh() |
刷新布局，你可以通过getNodes()获取当前图谱中的节点，并通过节点的isHide属性隐藏一些节点，再调用refresh()方法可以根据依然显示的节点重新布局图谱;或者在动态向图谱中添加数据候刷新布局;当你的图片默认默认状态是不可见的时，在切换到可见状态下后可能会显示不正常，这时你调用一下refresh()方法可以让图片正确显示。总之一句话：当图谱中的节点看起来不正常时，你都可以调用refresh方法来让布局器重新为节点分配位置。
|
|
|
focusRootNode()
|
选中图谱的根节点居中并选中;
|
|
|
focusNodeById(nodeId)
|
根据节点id在图谱中选中该节点并居中;
|
|
|
getNodeById(nodeId)
|
根据节点id获取节点对象;
|
|
|
removeNodeById(nodeId)
|
移除指定id对应的节点，彻底移除，移除element和数据对象;
|
|
|
downloadAsImage(format)
|
下载图片，将当前图谱导出为图片，format可以为：png/jpg，默认为png;
|
|
|
getNodes() |
获取图谱中所有的节点对象，可以直接修改该对象的属性，这些对象不能用于JSON序列化;
|
|
|
getLines() |
获取图谱中所有的连线对象，可以直接修改该对象的属性，这些对象不能用于JSON序列化;
|
|
|
getGraphJsonData()
|
获取当前图谱的节点、关系数据的json数据;
|
|
|
getGraphJsonOptions()
|
获取当前图谱的完整的配置信息;
|
Events / 事件:
|
事件名
|
说明
|
参数
|
|---|---|---|
|
on-node-click
|
点击节点事件，注意：请使用<graph
:on-node-click=functionName />的方式来绑定节点事件,使用示例
|
(nodeObject, $event)
|
|
on-node-expand
|
展开节点事件，仅当节点的【展开/收缩】按钮可用时有效，注意：请使用<graph
:on-node-expand=functionName />的方式来绑定事件,使用示例
|
(nodeObject, $event)
|
|
on-node-collapse
|
收缩节点事件，仅当节点的【展开/收缩】按钮可用时有效，注意：请使用<graph
:on-node-collapse=functionName />的方式来绑定事件,使用示例
|
(nodeObject, $event)
|
|
on-line-click
|
点击线条事件，注意：请使用<graph
:on-line-click=functionName />的方式来绑定关系线事件,使用示例
|
(lineObject, $event)
|
Slot / 插槽:
|
事件名
|
说明
|
参数
|
|---|---|---|
|
node
|
自定义节点内容的插槽，通过此功能可以完全自定义节点的样式，实现图片节点、闪烁节点等等你想要的效果。使用示例
|
{ node }
|
|
bottomPanel
|
自定义图谱底部区域内容的插槽，通过此功能可以在图谱的底部显示一些内容，比如筛选区域，图例说明等。
|
{ graph }
|
Arributes / 选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
id
|
节点id，不能重复，重复会被忽略
|
string
|
是
|
|
|
text
|
节点名称 |
string
|
是
|
|
|
styleClass
|
节点样式class
|
string
|
否
|
|
|
color
|
节点背景颜色
|
string
|
否
|
|
|
fontColor
|
节点文字颜色
|
string
|
否
|
|
|
borderWidth
|
节点边框粗细（像素）
|
int
|
否
|
1
|
|
borderColor
|
节点边框颜色
|
string
|
否
|
|
|
nodeShape
|
节点形状，0:圆形；1:矩形;使用示例
|
int
|
否
|
1
|
|
width
|
节点宽度 |
int
|
否
|
自动
|
|
height
|
节点高度 |
int
|
否
|
自动
|
|
opacity
|
透明度(值范围：0到1,或者0到100)
|
number
|
否
|
1
|
|
isHide
|
是否隐藏这个节点
|
boolean
|
否
|
false
|
|
disableDrag
|
是否禁用节点的拖动功能
|
boolean
|
否
|
false
|
|
disableDefaultClickEffect
|
是否禁用默认的点击选中效果（即使禁用，可以出发自定的节点点击事件）
|
boolean
|
否
|
false
|
|
expandHolderPosition
|
节点展开/关闭按钮位置（left/top/right/bottom）节点的这个设置会覆盖全局的expandHolderPosition设置，即使改节点没有子节点也可以让其显示展开/收缩按钮，可以实现部分节点显示展开/收缩按钮的效果;使用示例
|
string
|
否
|
hide
|
|
expanded
|
手工设置节点的展开收缩状态;使用示例
|
boolean
|
否
|
true
|
|
fixed
|
是否使用固定位置（以当前图谱左上角为0,0的坐标系）;使用示例
|
boolean
|
否
|
false
|
|
x
|
x坐标（以当前图谱左上角为0,0的坐标系）,fixed=true时有效
|
int
|
否
|
|
|
y
|
y坐标（以当前图谱左上角为0,0的坐标系）,fixed=true时有效
|
int
|
否
|
|
|
innerHTML
|
用HTML自定义节点内部的内容，当此属性不为空时，text属性将失效;使用示例
|
string
|
否
|
|
|
html
|
用HTML自定义节点，当此属性不为空时，节点的所有样式属性将失效使用示例
|
string
|
否
|
|
|
data
|
自定义属性需要放在这里，才能在后续使用中从节点获取，如:{myKey1:'value1',myKey2:'value2'}，示例1：使用自定义属性作为节点名称/节点图标，示例1：使用自定义属性进行筛选
|
Object
|
否
|
Runtime-properties / 运行时属性:
|
属性名
|
说明
|
|---|---|
|
targetNodes
|
获取与当前节点存在关系的其他所有节点，这些节点中包含的当前节点的父节点和子节点，如果只想获取父节点请使用lot.parent,获取子节点请使用lot.childs
|
|
lot |
获取与当前节点的布局信息，其中包含了当前布局器为其设置的坐标、层级、权重、上下级节点等信息
|
|
lot.parent |
单独说明lot中的这个属性，他可以获取节点的父节点，这个子节点是由布局器分析出来的父节点，在有循环闭合回路的关系网中是不准确的，他会强行从多个中取一个
|
|
lot.childs |
单独说明lot中的这个属性：他可以获取节点的子节点，这个子节点是由布局器分析出来的子节点，在有循环闭合回路的关系网中是不完整的，他会强行剔除一些冲突的子节点
|
在构建图谱数据时需要两个要素nodes和links，其中的links是指节点之间的关系（link），在图谱内部中将其称之为relation，图谱会根据这些关系(relation)来生成线条(Line)。并将关系(relation)放到线条(Line)的relations数组属性中，一条线条(Line)上可以附着多条关系(relation)。
线条可以通过this.$refs.seeksRelationGraph.getLines()的方式获取。
线条可以通过this.$refs.seeksRelationGraph.getLines()的方式获取。
Link Arributes / 关系数据的选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
from
|
关系from节点的id
|
string
|
是
|
|
|
to
|
关系to节点的id
|
string
|
是
|
|
|
text
|
关系文字 |
string
|
是
|
|
|
styleClass
|
节点样式class
|
string
|
否
|
|
|
lineWidth
|
线条粗细（像素）
|
int
|
否
|
1
|
|
lineColor
|
线条颜色 |
string
|
否
|
|
|
isHide
|
是否显示 |
boolean
|
否
|
false
|
|
lineShape
|
线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
fontColor
|
线条文字颜色
|
string
|
否
|
|
|
showLineLabel
|
是否显示连线文字
|
boolean
|
否
|
true
|
|
isHideArrow
|
是否显示箭头
|
boolean
|
否
|
true
|
|
data
|
自定义属性需要放在这里，才能在后续使用中从节点获取，如:{myKey1:'value1',myKey2:'value2'},示例1：使用自定义属性进行筛选
|
Object
|
否
|
Line / 线条对象属性:
|
属性名
|
说明
|
|---|---|
|
relations |
【只读属性】Array<Link>这是一个数组，可以获取这个线条上所有的关系数据。
|
|
fromNode |
【只读属性】获取这个线条的起始节点对象
|
|
toNode |
【只读属性】获取这个线条的终止节点对象
|
所有布局都具有的选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
layoutLabel
|
布局描述（如果有多个布局可以切换，此属性将作为布局名称显示）
|
string
|
是
|
|
|
layoutName |
布局方式（tree树状布局/center中心布局/force自动布局）
|
string
|
是
|
center
|
|
layoutClassName
|
当使用这个布局时，会将此样式添加到图谱上
|
string
|
否
|
1
|
|
useLayoutStyleOptions
|
是否使用该布局的样式设置覆盖全局样式设置（当有多个布局可供切换时，此功能可以实现不同布局下整体样式的切换）
|
boolean
|
否
|
false
|
|
defaultNodeShape
|
当useLayoutStyleOptions=true时有效，默认的节点形状，0:圆形；1:矩形
|
int
|
否
|
1
|
|
defaultNodeColor
|
当useLayoutStyleOptions=true时有效，默认的节点背景颜色
|
string
|
否
|
|
|
defaultNodeFontColor
|
当useLayoutStyleOptions=true时有效，默认的节点文字颜色
|
string
|
否
|
|
|
defaultNodeBorderColor
|
当useLayoutStyleOptions=true时有效，默认的节点边框颜色
|
string
|
否
|
|
|
defaultNodeBorderWidth
|
当useLayoutStyleOptions=true时有效，默认的节点边框粗细（像素）
|
int
|
否
|
1
|
|
defaultNodeWidth
|
当useLayoutStyleOptions=true时有效，默认的节点宽度
|
int
|
否
|
自动
|
|
defaultNodeHeight
|
当useLayoutStyleOptions=true时有效，默认的节点高度
|
int
|
否
|
自动
|
|
defaultExpandHolderPosition
|
当useLayoutStyleOptions=true时有效，默认的节点展开/关闭按钮位置（left/top/right/bottom）
|
string
|
否
|
hide
|
|
defaultLineColor
|
当useLayoutStyleOptions=true时有效，默认的线条颜色
|
string
|
否
|
|
|
defaultLineWidth
|
当useLayoutStyleOptions=true时有效，默认的线条粗细（像素）
|
int
|
否
|
1
|
|
defaultLineShape
|
当useLayoutStyleOptions=true时有效，默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
defaultLineMarker
|
当useLayoutStyleOptions=true时有效，默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
|
Object
|
否
|
|
|
centerOffset_x
|
根节点x坐标偏移量
|
int
|
否
|
0
|
|
centerOffset_y
|
根节点y坐标偏移量
|
int
|
否
|
0
|
|
defaultShowLineLabel
|
当useLayoutStyleOptions=true时有效，默认是否显示连线文字
|
boolean
|
否
|
true
|
tree / 树状布局 特有的选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
from |
left:从左到右/top:从上到下/right:从右到左/bottom:从下到上
|
string
|
否
|
left
|
|
min_per_width
|
节点距离限制:节点之间横向距离最小值
|
int
|
否
|
|
|
max_per_width
|
节点距离限制:节点之间横向距离最大值
|
int
|
否
|
|
|
min_per_height
|
节点距离限制:节点之间纵向距离最小值
|
int
|
否
|
|
|
max_per_height
|
节点距离限制:节点之间纵向距离最大值
|
int
|
否
|
|
|
levelDistance
|
分别设置每一层的高度，例如：100,200,300,200，此设置优先级高于"节点距离限制"选项
|
string
|
否
|
center / 中心布局 特有的选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
distance_coefficient
|
层级距离系数，默认为1，可以为小数，用于调节中心布局不同层级之间的距离，实现连线比较长的视觉效果使用示例
|
number
|
否
|
left
|
force / 力学自动布局 特有的选项:
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|
暂无数据