我正在尝试使用 vis-network 渲染家谱，但不确定如何对齐每个父母的箭头，这也连接到他们的孩子。我尝试了一些样本，但边缘看起来很混乱。
这是祖父母、父母、兄弟姐妹和孩子的示例节点。
var nodes = [
{
id: "0.1",
shape: 'image',
label: 'Minato Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/7/71/Minato_Namikaze.png/revision/latest/scale-to-width-down/300?cb=20160125175116',
level: 0
},
{
id: "0.2",
shape: 'image',
label: 'Kushina Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/4/4d/Kushina_2.png/revision/latest/scale-to-width-down/300?cb=20150719165408',
level: 0
},
{
id: "0.3",
shape: 'image',
label: 'Naruto Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/0/09/Naruto_newshot.png/revision/latest/scale-to-width-down/300?cb=20170621101134',
level: 1
},
{
id: "1.1",
shape: 'image',
label: 'Hiashi Hyūga',
image: 'https://vignette.wikia.nocookie.net/naruto/images/e/ee/Hiashi_Hyuga.png/revision/latest/scale-to-width-down/300?cb=20150109142633',
level: 0
},
{
id: "1.2",
shape: 'image',
label: 'Mother',
image: 'https://vignette.wikia.nocookie.net/naruto/images/0/0a/Hyuuga_mother.png/revision/latest?cb=20150104203212',
level: 0
},
{
id: "1.3",
shape: 'image',
label: 'Hinata Hyūga',
image: 'https://data.whicdn.com/images/191073424/superthumb.jpg?t=1437945312',
level: 1
},
{
id: "1.4",
shape: 'image',
label: 'Hanabi Hyūga',
image: 'https://vignette.wikia.nocookie.net/naruto/images/d/da/Hanabi_Hyuga.png/revision/latest/scale-to-width-down/300?cb=20180314102603',
level: 1
},
{
id: "2.1",
shape: 'image',
label: 'Boruto Uzumaki',
image: 'https://www.anime-planet.com/images/characters/boruto-uzumaki-71171.jpg',
level: 2
},
{
id: "2.2",
shape: 'image',
label: 'Himawari Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/2/26/Himawari.png/revision/latest?cb=20171115100745',
level: 2
},
];
var edges = [
{from: "0.1", to: "0.2"},
{from: "0.3", to: "0.1"},
{from: "0.3", to: "0.2"},
{from: "1.1", to: "1.2"},
{from: "1.3", to: "1.1"},
{from: "1.3", to: "1.2"},
{from: "1.4", to: "1.1"},
{from: "1.4", to: "1.2"},
{from: "1.4", to: "1.3"},
{from: "0.3", to: "1.3"},
{from: "2.1", to: "2.2"},
{from: "0.3", to: "2.1"},
{from: "0.3", to: "2.2"},
{from: "1.3", to: "2.1"},
{from: "1.3", to: "2.2"},
];
var data = {
nodes: nodes2,
edges: edges2
};
var container = document.getElementById('network');
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
color: 'lightgray',
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
}
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {dragNodes :false},
physics:true,
};
var network = new vis.Network(container, data, options);
我希望输出如下所示
是否可以使用 vis-network 渲染类似的东西？或者是否有一个相关的库能够像上面那样呈现？
