Vis js网络 - 将标签与节点中的一个字母对齐答案

【问题标题】：Vis js network - align label with one letter in nodeVis js网络 - 将标签与节点中的一个字母对齐
【发布时间】：2020-01-17 15:24:00
【问题描述】：

我必须使用 vis js 网络将标签与节点内的一个字母（数字）对齐。正如文档所说，node 选项中有font.align 属性，默认情况下它设置为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;

【问题讨论】：

标签： javascript vis.js vis.js-network react-vis-network

【解决方案1】：

我遇到了同样的问题并且有一个非常愚蠢的解决方案：在您的号码前后添加一个空格。

nodes: [
  { id: 1, label: " 1 "},
  { id: 2, label: " 2 "},
  { id: 3, label: " 3 "},
  { id: 4, label: " 4 "},
  { id: 5, label: " 5 "}

【讨论】：