修改在網絡中爲vis.js選擇的特定節點的樣式

是否有方法僅更改所選節點的節點大小，而不是更改選項中所有節點的大小？這是我的節點選項修改在網絡中爲vis.js選擇的特定節點的樣式

nodes:{ 
       borderWidth: 1, 
       borderWidthSelected: 2, 
       physics: true, 
       color: { 
        border: '#000000', 
        background: '#ffffff', 
        highlight: { 
         border: '#000000', 
         background: '#B9B9BF' 
        } 
       }, 
       shadow:{ 
        enabled: false, 
        color: '#C11818', 
        size:10, 
        x:5, 
        y:5 
       }, 
       shape: 'circularImage', 
       mass: 2, 
       size: 25

我想擴大選擇的節點所以它是比別人更明顯。

network.on("selectNode", function (params) { 
     var nodeId = params.nodes[0]; 
     var node = nodes.get(nodeId); 
     nodeClick(nodeId, nodes, edges, network); 
     // var options= { 
     // nodes: { 
     // size: 40 
     // } 
     // }; 
     // network.setOptions(options); 
    });

註釋的部分設置尺寸對於所有的節點，而不是所選擇的一個和所述節點對象不具有上的選項任何手柄任一。

來源

2016-07-27 SunnyPenguin

，如果您有多項選擇啓用，您可以遍歷params.nodes

for (id in params.nodes){ 
    var node = network.body.nodes[params.nodes[id]]; 
    ... 
}

（取消選擇）

來源

2016-09-14 11:31:24 oFace

您可以更改所選節點的字體大小以增加其大小：

var nodes = new vis.DataSet([ 
 
    {id: 1, label: 'Node 1'}, 
 
    {id: 2, label: 'Node 2'}, 
 
    {id: 4, label: 'Node 4'}, 
 
    {id: 5, label: 'Node 5'} 
 
]); 
 
var edges = new vis.DataSet([ 
 
    {from: 1, to: 2}, 
 
    {from: 2, to: 4}, 
 
    {from: 2, to: 5} 
 
]); 
 

 
var container = document.getElementById('mynetwork'); 
 
var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
}; 
 
var options = { 
 
    interaction: { hover:true }, 
 
    nodes: { font: { size: 14 }} 
 
}; 
 
var network = new vis.Network(container, data, options); 
 

 
network.on("selectNode", function (params) { 
 
    var selectedNodeId = params.nodes[0]; 
 
    var node = network.body.nodes[selectedNodeId]; 
 
    node.setOptions({ 
 
    font: { 
 
     size: 20 
 
    } 
 
    }); 
 
}); 
 

 
network.on("deselectNode", function (params) { 
 
    var deselectedNodeId = params.previousSelection.nodes[0]; 
 
    var node = network.body.nodes[deselectedNodeId]; 
 
    node.setOptions({ 
 
    font: { 
 
     size: options.nodes.font.size 
 
    } 
 
    }); 
 
});

#mynetwork { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid lightgray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script> 
 
    <link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/> 
 
</head> 
 
<body> 
 
<div id="mynetwork"></div> 
 
</body> 
 
</html>

來源

2016-07-28 09:37:52 mojoaxel

這絕對是h ELPS。但我只想確定在接受答案之前沒有其他方法可以增加節點的直徑。我爲節點使用圓形圖像，標籤顯示在每個節點下。順便說一句，我不知道你可以用這種方式設置節點選項。我使用節點的數據集。 'nodes = new vis.DataSet（）'setOptions在那裏不可用。謝謝。 – SunnyPenguin

而不是使用'font：{size：20}'我可以使用'size：25'，這樣會放大節點。感謝您的回答。 – SunnyPenguin

修改在網絡中爲vis.js選擇的特定節點的樣式

回答

相關問題