如何在 Vis.js 中为节点提供一个选项答案

【问题标题】：How to give a node an option in Vis.js to如何在 Vis.js 中为节点提供一个选项
【发布时间】：2017-02-27 23:19:15
【问题描述】：

我正在使用 vis.js 并想要呈现一个看起来像这样的图形：http://visjs.org/examples/network/nodeStyles/circularImages.html

问题是我不知道如何为每个节点设置图像。在文档中说：

当你给一个节点一个选项时，你将覆盖全局该属性的选项，以及该属性的组选项如果节点在一个组中。如果然后将该选项设置为空，它将恢复为默认值。

但没有提及如何为特定节点提供选项。

这是我的代码：

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">

    var dot = 'hello {Hey->"I am lost"; 2->3; 5->3;}';
    var parsed = vis.network.convertDot(dot);

    var data = {
      nodes: parsed.nodes,
      edges: parsed.edges
    }

    var options = parsed.options;


    options.nodes = {
      // everything that is here will apply globaly

    }

    var container = document.getElementById('mynetwork');

    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

【问题讨论】：

标签： javascript vis.js

【解决方案1】：

好吧，没关系……看来我已经找到了答案。似乎使用 Dot 语言不允许用户单独自定义节点。

这个答案帮助了我：How to set the image size in Vis.js network graph

这就是我所拥有的

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
var edges = [];
var nodes = [];

nodes.push({
     id: 7,
     shape: 'image',
     image: 'https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg',
     label: 'Google',
     widthMin: 20,
     widthMax: 20
 });

 nodes.push({
   id: 1,
   label: 'hello!'
 });

 nodes.push({
   id: 2,
   shape: 'image',
   image: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSbvJNLcGgzruK47eQfHZrcotFzMF0yeK28jgFUJCXh-36zm3Nz',
   label: 'Maps'

 })

 edges.push({
   from: 2,
   to: 7,
   arrows: 'from'
 })

 edges.push({
     from: 1,
     to: 7,
     length: 100
 });

 var data = {
     nodes: nodes,
     edges: edges
 };

  var options = {};
  var container = document.getElementById('mynetwork');
  network = new vis.Network(container, data, options);

 </script>
 </body>
 </html>

【讨论】：