我必须使用 vis js 网络将标签与节点内的一个字母(数字)对齐。正如文档所说,选项内部有font.align
属性node
,默认情况下它设置为center
. 标签中有多个字母时看起来不错:
这是一个错误还是我做错了什么?如果它是一个错误,我该如何解决它?
我的完整代码(我正在使用 react-graph-vis 1.0.5 版):
import React from 'react';
import Graph from "react-graph-vis";
import 'vis-network/styles/vis-network.min.css';
const ExecutionPathGraph = ({issueTraces}) => {
const graph = {
nodes: [
{ id: 1, label: "1"},
{ id: 2, label: "2"},
{ id: 3, label: "3"},
{ id: 4, label: "4"},
{ id: 5, label: "5"}
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]
};
const options = {
height: '500px',
nodes: {
shape: 'circle',
borderWidth: 0,
color: '#000',
font: {
color: '#fff',
size: 18,
align: 'center'
},
shadow: true,
},
edges: {
color: {
color: '#F98323'
},
width: 1.5
},
layout: {
hierarchical: {
sortMethod: 'directed',
shakeTowards: 'roots',
direction: 'UD'
}
},
interaction: {
dragNodes: false,
dragView: false,
selectable: false,
selectConnectedEdges: false,
hover: false,
hoverConnectedEdges: false,
zoomView: false,
},
physics: false
};
return (
<Graph
graph={graph}
options={options}
/>
);
};
export default ExecutionPathGraph;