节点如果是A->B,C->B,并且设置 expandHolderPosition 和 expanded,似乎树的渲染有问题
你好,rt 希望能解答一下,谢谢。示例如下
{
"nodes": [
{
"id": " 1",
"innerHTML": "text1",
"width": 240,
"expandHolderPosition": "right",
"expanded": true
},
{
"id": "3",
"innerHTML": "text3",
"width": 240,
"expandHolderPosition": false,
"expanded": false
},
{
"id": "2",
"innerHTML": "text2",
"width": 240,
"expandHolderPosition": "right",
"expanded": true
},
],
"links": [
{
"from": " 1",
"to": "3"
},
{
"from": "2",
"to": "3"
}
]
}
你的数据被渲染的时候应该是这个效果(绿色为可见,红色为不可见):
你的问题应该是说节点3没有被显示,那是因为节点2设置了expaned=false(这代表节点2的子节点们被收起了,子节点将不可见),但又给节点2设置了"expandHolderPosition": false(这将让节点2 的【展开/收起】按钮不能正常显示,你也看不出来节点2是被收起的状态),所以最终的效果就是你图中的效果,节点3不可见,也看不出原因(原因是父节点节点2被收起了)
确实是这样,我原意这样设置是想表示:如果该结点有子结点,就要expandHolderPosition:'right',没有则expandHolderPosition:false/hide,并且,该结点有子结点 expaned 设置为 true,没有子结点设置为 false。但是发现 一种特殊的情况:A的子结点有B,C的子结点也有B,也就是 A->B,C->B ,这种情况下,图谱应该是认为,B是共同父结点了,所以会展示成上述的样子,请问还有两全的方法么
确实是这样,我原意这样设置是想表示:如果该结点有子结点,就要expandHolderPosition:'right',没有则expandHolderPosition:false/hide,并且,该结点有子结点 expaned 设置为 true,没有子结点设置为 false。但是发现 一种特殊的情况:A的子结点有B,C的子结点也有B,也就是 A->B,C->B ,这种情况下,图谱应该是认为,B是共同父结点了,所以会展示成上述的样子,请问还有两全的方法么
图谱中的数据会被处理成每个节点必然只有一个父节点。 那么会从root开始,根据【lines中的关系顺序】来构建上下级关系,从根节点开始向外扩散,与根节点关系层级距离越小的越优先成为其他节点的父节点,与A层级距离相等时,关系越早出现在lines中的节点优先成为其他节点的父节点。以上构建过程中使用的关系与关系本身的方向无关。 假设:
nodes = [A,B,C,D,E,F],root=A
lines = [
E -> A,
A -> B,
F -> C,
F -> B ,
E -> B,
D -> B,
D -> C ,
]
上面数据最终构建出的父子关系为:
A
|---- E
|---- B
|---- F
|---- C
|----D
建议你不要手动给节点单独设置expandHolderPosition属性和expaned属性,而是设置全局的defaultExpandHolderPosition='right',这样做图谱会自动根据节点是否有子节点来管理【展开/收起】按钮是否显示。 在此基础上,你在setJsonData方法被执行之后,再去通过graphInstance.getNodes()获取节点,根据节点是否有子节点(node.lot.childs)、父节点(node.lot.parent)等条件,根据你的需要选择性的控制某些节点是否被收起(expanded=false,子节点将被隐藏)以及是否隐藏【展开/收起】按钮(expandHolderPosition=hide)。