如何给一个节点Vis.js到

选项我使用vis.js并想呈现，看起来曲线像这样的：http://visjs.org/examples/network/nodeStyles/circularImages.html 如何给一个节点Vis.js到

的问题是，我不知道该怎么为每个节点设置图像。在文档有人说：

当你给一个节点选项，你将覆盖全球选项用于财产，也是该集团选择该属性如果节点是一组。如果您然后将该选项设置为空，那么将恢复为默认值。

但是没有说关于如何给选项到一个特定的节点。

这里是我的代码：

<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>

来源

2017-02-27 Ivan Prizov

好吧，没关系......看来，我已经找到了答案。看起来好像使用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>

来源

2017-02-28 07:09:08

如何给一个节点Vis.js到

回答

相关问题