Question

我正在使用VIS来构建图表，但是存在问题。如果我创建简单的层次图：有3个顶点和3个边，一个边是不可见的（它隐藏在另外两个和顶点之后）。使用带有diagonalCross类型的smoothCurves是解决方案的一部分 - 图形看起来很好，但在移动顶点之后。在页面加载后直接边缘不可见。有可能解决它吗？

继承我的代码：

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="vis.js"></script>
  <link rel="stylesheet" type="text/css" href="vis.css">
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1', level:0},
    {id: 2, label: 'Node 2', level:1},
    {id: 4, label: 'Node 4', level:2}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2},
    {from: 1, to: 4},
    {from: 2, to: 4}
  ];

  // create a network
  var container = document.getElementById('mynetwork');
  var data= {
    nodes: nodes,
    edges: edges,
  };
  var options = {
    width: '900px',
    height: '900px',
    edges:
    {
        style: 'arrow'
    },
    dragNetwork: true,
    navigation: true,
    keyboard: true,
    <!-- dragNodes: false, -->
    hierarchicalLayout: {enabled:true}
  };
  var network = new vis.Network(container, data, options);
  var type = "diagonalCross";
  network.setOptions({smoothCurves:{type:type}});
</script>
</body>
</html>

为我使用分层视图很重要。

Answer 1

我认为javascript中的HTML样式注释会阻止浏览器理解您的代码。只需删除评论并刷新浏览器即可。像这样：

var options = {
    width: '900px',
    height: '900px',
    edges: {
        style: 'arrow'
    },
    dragNetwork: true,
    navigation: true,
    keyboard: true,
    // <!-- dragNodes: false, -->
    hierarchicalLayout: {enabled:true}
  };

可见，启动时不可见边缘

1 个答案: