问题描述
我可以通过在节点1205
上单击以下内容来在vis.js中显示图形的一部分,但无法弄清楚如何使扩展的部分在同一节点上的第二次单击中消失?
I am able to display part of the graph in vis.js by clicking on the node 1205
with the following but cannot figure out how to make the expanded part disappear on a second click on the same node?
var nodes = new vis.DataSet([
{id: 2696, label: "l"},
{id: 1205, label: "l"},
{id: 2697, label: "l"}
]);
var edges = new vis.DataSet([
{from: 2696, to: 2697},
{from: 2696, to: 1205}
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var network = new vis.Network(container, data, {});
network.on("click", function(e) {
tw_id = 1205;
if (e.nodes[0] == tw_id) {
sel_id = e.nodes[0];
var node = nodes.get(e.nodes[0]);
nodes.add([
{id: 2021, label: "l"},
{id: 2047, label: "l"}
]);
edges.add([
{from: 1205, to: 2021},
{from: 1205, to: 2047}
]);
nodes.update(node);
}
});
#mynetwork {
width: 400px;
height: 300px;
border: 1px solid lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<div id="mynetwork"></div>
推荐答案
下面是一个示例,该示例基于@pgoldweic的选项以及预定义将在节点1205上单击显示/未显示的边缘和节点的方法来实现.
Here's an example of how to implement this based on @pgoldweic's option plus pre-defining the edges and nodes that will be shown/ unshown per click on node 1205.
该代码维护一个布尔值,以指示是显示下一个动作还是隐藏其他节点.相对于hidden
属性,显示为false
,隐藏为true
.
The code maintains a boolean to indicate whether the next action is show or hide the other nodes. Against the hidden
property it is false
for show and true
for hide.
var nodes = new vis.DataSet([
{id: 2696, label: "2696", hidden: false},
{id: 1205, label: "1205", hidden: false},
{id: 2697, label: "2697", hidden: false},
{id: 2021, label: "2021", hidden: true},
{id: 2047, label: "2047", hidden: true}
]);
var edges = new vis.DataSet([
{id: 'e1', from: 2696, to: 2697, hidden: false},
{id: 'e2', from: 2696, to: 1205, hidden: false},
{id: 'e3', from: 1205, to: 2021, hidden: true},
{id: 'e4', from: 1205, to: 2047, hidden: true}
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var network = new vis.Network(container, data, {});
// true=hide; false=show
var toggle = false;
network.on("click", function(e) {
tw_id = 1205;
if (e.nodes[0] == tw_id) {
nodes.update([
{id: 2021, hidden: toggle},
{id: 2047, hidden: toggle}
]);
edges.update([
{id: 'e3', hidden: toggle},
{id: 'e4', hidden: toggle}
]);
network.fit();
// switch toggle
toggle = !toggle;
}
});
#mynetwork {
width: 400px;
height: 300px;
border: 1px solid lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<div id="mynetwork"></div>
这篇关于如何在vis.js中隐藏图的分支?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!