2016-07-27 2 views
0

Есть ли способ изменить размер узла только для выбранного узла, а не изменять размер для всех узлов в параметрах? Это мои параметры узлаИзменить стиль для определенного узла, выбранного в сети, для 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); 
    }); 

Закомментированная часть устанавливает размер для всех узлов, а не один, выбранные и объект узла не имеет какую-либо ручки на вариантах либо.

ответ

1

если у вас есть множественный выбор включен, вы можете перебираем params.nodes

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

(отменить выбор)

1

Вы можете изменить размер шрифта выбранного узла, чтобы увеличить его размер:

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>

+0

Это определенно h ELPS. Но я просто хочу быть уверенным, что нет другого способа увеличить диаметр узла, прежде чем я приму ответ. Я использую круговое изображение для узлов, и метка отображается под каждым узлом. BTW, я не знал, что вы можете установить параметры узла таким образом. Я использую набор Dataset для узлов. 'nodes = new vis.DataSet()' setOptions там недоступно. Благодарю. – SunnyPenguin

+0

Вместо того, чтобы использовать 'font: {size: 20}' Я мог бы просто использовать 'size: 25', и это увеличит узел. Спасибо за Ваш ответ. – SunnyPenguin

Смежные вопросы