3

我必须使用 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;
4

1 回答 1

1

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

nodes: [
  { id: 1, label: " 1 "},
  { id: 2, label: " 2 "},
  { id: 3, label: " 3 "},
  { id: 4, label: " 4 "},
  { id: 5, label: " 5 "}
于 2020-08-01T04:15:59.387 回答