天道酬勤,学无止境

How to clear/reset/refresh vis.js function for selectNode or selectEdge?

  1. Firstly please refer to this issue (Has been solved).
  2. Continuous from that issue, I want to use selectNode or selectEdge function at same page and same JS function, however the function is unable to click, why this happen? If I don't use previous function, the selectNode or selectEdge is work as well.

So here, anyone know how to clear/delete/refresh previous function prior to clicking the selectNode or selectEdgefunction?

Here is the selectNode or selectEdge function.

function node(){
    // Previous solved issue
    $("#btnSearchNode").on('click',function () {
        for (var i = 0;i<test_array_node.length;i++){
            if (test_array_node[i].label.indexOf($("#inputSearchNode").val()) >=0 && $("#inputSearchNode").val() != ''){
                test_array_node[i].font = {
                    color:'#FFFFFF',
                    background: '#4A77E0',
                    size: 20
                };
            }else{
                delete test_array_node[i].font;
            }
        }
        new vis.Network(container, data, options);
    });
    
    // Current issue - how to clear above function to be able below function can be click
    network.on('selectNode', function (properties){
        console.log('Node is selected');
    },
    network.on('selectEdge', function (properties){
        console.log('Edge is selected');
    }
}

评论

You have written code for selectEdge & selectEdge on page load . So , it has reference of intial network instance . But , when you filter your nodes you are reinitializing i.e : new vis.Network(container, data, options) so previous instance doesn't work . Instead save your instance in some variable and then reinitialize your events .

Demo Code :

var allNodes = [{
    id: 1,
    label: "55"
  },
  {
    id: 2,
    label: "192.12"
  },
  {
    id: 3,
    label: "192.16"
  },
  {
    id: 4,
    label: "192.168.1.8"
  },
];
// Create edge data array
var allEdges = [{
    id: "1_2",
    from: 1,
    to: 2
  },
  {
    id: "2_3",
    from: 2,
    to: 3
  },
  {
    id: "2_4",
    from: 2,
    to: 4
  },
  {
    id: "4_1",
    from: 4,
    to: 1
  }
]
var container = document.getElementById('mynetwork');
var nodes = new vis.DataSet(allNodes);
var edges = new vis.DataSet(allEdges);
var data = {
  nodes: nodes,
  edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
intialize(network); //call this
$("#btnSearch").on('click', function() {
  for (var i = 0; i < allNodes.length; i++) {
    if (allNodes[i].label.indexOf($("#inputSearch").val()) >= 0 && $("#inputSearch").val() != '') {

      allNodes[i].font = {
        background: "#FF0000",
        color: "#FFFFFF"
      };
    } else {
      delete allNodes[i].font;
    }
  }
  network = new vis.Network(container, data, options); //get instance
  intialize(network); //call this 
});

function intialize(network) {
  //reintialize..
  network.on('selectNode', function(properties) {
    console.log('Node is selected');
  })
  network.on('selectEdge', function(properties) {
    console.log('Edge is selected');
  })
}
#mynetwork {
  width: 500px;
  height: 500px;
  border: 1px solid lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<input type="text" id="inputSearch" placeholder="Please enter the ip address"><button id="btnSearch">Search</button>
<div id="mynetwork"></div>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 为 vis.js 修改网络中选定的特定节点的样式(Modify the style for a specific node selected in the network for 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); })
  • Vue+TS引入Vis.js(可视化库)的方法
    简介:vue项目中添加复杂人物可视化关系,利用图表展示(以该节点为核心节点,拓展关系,群与群之间的同成员交叉关系等) 基于浏览器的动态可视化库 vis.js GitHub案例:可视网络-networkv jiis.js Installation ``` npm install --save vue2vis ``` or ``` yarn add vue2vis ``` Usage GraphVis2.vue <template> <div class="relationship-wrap-chart" @click.stop="hideContextMenu" id="relationship" > <!-- loading --> <!-- <vi-spin tip="Loading..." v-show="relationChart.isLoadingVisible" class="load-style"> </vi-spin> --> <network id="myNetwork" class="graphdiv" :nodes="relationChart.relationshipNodes" :edges="relationChart.relationshipEdges" :options="options" @select-node="selectNode"
  • vis.js 中的多节点选择(Multiple node selection in vis.js)
    问题 我在玩 vis.js 因为我喜欢它的网络可视化模块。 我想知道,因为我在文档中找不到它,是否可以选择多个节点。 干杯, 里卡尔多 回答1 在 http://visjs.org/docs/network/ 的文档中搜索“可选”属性 如果为 true,则可以通过单击来选择网络中的节点。 长按可用于选择多个节点。 回答2 更新! 文档的链接是 http://visjs.org/docs/network/interaction.html 将 multiselect 属性设置为 true。 将此部分添加到您的网络选项对象。 interaction: { multiselect: true} 回答3 我刚刚发现在 vis.js 中你可以选择多个节点长按它们。 回答4 如果您正在寻找一个矩形来选择您的节点,只需查看 visjs-network github 上的此线程:https://github.com/almende/vis/issues/3594 完整的演示代码: const nodes = new vis.DataSet([ { id: 1, label: 'Node 1' }, { id: 2, label: 'Node 2' }, { id: 3, label: 'Node 3' }, { id: 4, label: 'Node 4' }, { id: 5, label:
  • Modify the style for a specific node selected in the network for vis.js
    Is there a way to change the node size for the selected node without changing the size for all nodes in the options ? These are my node options: 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 } I want to enlarge the selected node so it is more visible than the others. network.on("selectNode", function (params) { var nodeId = params.nodes[0]; var node = nodes
  • R: Display "popup" information when mouse hovers over (graph) visnetwork
    I simulated some data and created a graph network in R using visnetwork: library(igraph) library(dplyr) library(visNetwork) #create file from which to sample from x5 <- sample(1:100, 1100, replace=T) #convert to data frame x5 = as.data.frame(x5) #create first file (take a random sample from the created file) a = sample_n(x5, 1000) #create second file (take a random sample from the created file) b = sample_n(x5, 1000) #combine c = cbind(a,b) #create dataframe c = data.frame(c) #rename column names colnames(c) <- c("a","b") #create graph graph <- graph.data.frame(c, directed=F) graph <- simplify
  • R:鼠标悬停在(图形)visnetwork上时显示“弹出”信息(R: Display "popup" information when mouse hovers over (graph) visnetwork)
    问题 我模拟了一些数据并使用 visnetwork 在 R 中创建了一个图形网络: library(igraph) library(dplyr) library(visNetwork) #create file from which to sample from x5 <- sample(1:100, 1100, replace=T) #convert to data frame x5 = as.data.frame(x5) #create first file (take a random sample from the created file) a = sample_n(x5, 1000) #create second file (take a random sample from the created file) b = sample_n(x5, 1000) #combine c = cbind(a,b) #create dataframe c = data.frame(c) #rename column names colnames(c) <- c("a","b") #create graph graph <- graph.data.frame(c, directed=F) graph <- simplify(graph) plot(graph) fc <-
  • 如何在 vis.js 中隐藏图形的分支?(How to hide graph's branch in vis.js?)
    问题 我可以通过单击节点1205来在 vis.js 中显示部分图形,但无法弄清楚如何在第二次单击同一节点时使展开的部分消失? 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
  • Vis.js 网络:如何取回数据和选项以进行保存?(Vis.js network: how to get data and options back for saving?)
    问题 我的目的是使用 vis.js 创建简单的图形编辑器,我正在考虑的第一个功能是手动定位节点并保存它。 但是,与设置选项不同,获取所有选项的直接方法似乎并不存在。 是否有任何合理的方法来获取它们(除了尝试使用诸如dragEnd事件来跟踪所有更改,这听起来太脆弱了)? 事实上,我正在寻找一种方法来提取数据(节点/边及其设置)和选项,以便一旦使用这些选项呈现网络,它看起来与保存的内容相同(或至少相似)。 回答1 Vis.js provides a simple example to export and import networks as JSON. There is also an example with basic Editor-functionality like adding/removing nodes and edges 回答2 我已经创建了我的 js 函数来获取所有选项。 例如,如果我要获取每个节点 ID 的组: function getGroup(network, id){ var group = network.body.data.nodes._data[id].group; return group; } 更新:我没有一个函数来获取所有选项,但例如。 您可以使用此功能获得几个选项值: function getOptions(network){ var opt
  • vis.js timeline how to add mouse over event to vis-item box-box
    问题 我使用 vis.js 创建了一个时间线图。 我有很多 vis-box 项目。 因为我可以在时间轴上显示非常有限的信息。 因此,我想在用户移动项目时显示项目的详细信息。 我在这个 url http://visjs.org/docs/timeline/#Events 查看时间线事件的文档。 我看到了如何处理选择事件。 我想知道如何为项目添加鼠标悬停事件? 谢谢。 这是用于选择事件 function onSelect (properties) { alert('selected items: ' + properties.nodes); } // add event listener timeline.on('select', onSelect); 如何为项目添加鼠标悬停事件? timeline.on('mouseover', onMouseover)? 这是代码https://jsfiddle.net/gbdjbdhv/17/ 谢谢你的帮助! 回答1 您可以将常规 JavaScript 事件侦听器附加到容器 DIV,并使用方法timeline.getEventProperties(event)来查看事件是否发生在项目之上。 var container = document.getElementById('visualization'); var items = new vis
  • 如何将 vis.js 中的箭头更改为鸡爪或基数(How to change arrows in vis.js to chicken feet or cardinality)
    问题 我正在尝试使用 vis.js 来显示 XML 或 JSON 架构的结构。 我想显示基数而不是箭头。 关于要查看的文档的任何建议,因为我找不到任何建议。 谢谢,洛伦 回答1 每条边都有一个负责绘制箭头的函数: drawArrows 。 因此,可以重新定义其: edge.drawArrows = function drawArrows(ctx, arrowData) { if (this.options.arrows.from.enabled === true) { drawArrowCircle(ctx, this.selected, this.hover, arrowData.from); } if (this.options.arrows.middle.enabled === true) { drawArrowDiamond(ctx, this.selected, this.hover, arrowData.middle); } if (this.options.arrows.to.enabled === true) { this.edgeType.drawArrowHead(ctx, this.selected, this.hover, arrowData.to); } } https://jsfiddle.net/ct34zwn6/
  • 如何限制 vis.js 网络的缩放?(How to limit zooming of a vis.js network?)
    问题 我已经使用 vis.js 实现了一个简单的网络。 这是我的代码: //create an array of nodes var nodes = [ { id: "1", label: "item1" }, { id: "2", label: "item2" }, { id: "3", label: "item3" }, ]; // create an array with edges var edges = [ { from: "1", to: "2", label: "relation-1", arrows: "from" }, { from: "1", to: "3", label: "relation-2", arrows: "to" }, ]; // create a network var container = document.getElementById('mynetwork'); // provide the data in the vis format var data = { nodes: nodes, edges: edges }; var options = {}; // initialize your network! var network = new vis.Network(container, data, options)
  • Vis.js network graph not updating with node changes
    问题 我有一个函数可以清除节点或边数据集中可能存在的任何数据,然后继续用新数据重新填充它们。 这是一个分层网络,所有节点和边都创建后动态设置级别,因此节点的级别属性最终由 nodes.update() 调用添加。 节点的级别设置正确,可以在我的控制台日志中看到,但图表不反映级别。 没有显示错误。 看到节点似乎是正确的,我认为设置级别的方法不是问题,但我能想到的唯一可能干扰的其他事情是在像我这样的角度工厂中使用它,节点.update() 不会触发图形的重新渲染,或者我的选项。 任何见解都值得赞赏,因为我真的不知道为什么设置级别不会改变我的图表。 抱歉信息不足。 我只是不知道从哪里开始,也不想分享我的整个文件。 网络工厂: var nodes, edges, network; visApp.factory('networkFactory', function() { var service = {}; service.init = function() { // create an array with nodes nodes = new vis.DataSet(); // create an array with edges edges = new vis.DataSet(); // create a network var container = document
  • Vis.js network graph not updating with node changes
    I have a function that clears any data that might be in the nodes or edges dataset, and goes on to repopulate them with new data. It's a hierarchical network, and levels are dynamically set AFTER all the nodes and edges have been created, so the level property of the nodes are ultimately added by nodes.update() calls. The nodes' levels are correctly set, and can be seen in my console log, but the graph doesn't reflect the levels. No errors are shown. Seeing as how the nodes seem to be correct, I don't think it's the method setting the levels that's the issue, but the only other things I can
  • 如何为 vis.js 时间轴引发点击事件(以在 clickToUse 选项设置为 True 时获得点击结果)?(How to raise a click event for a vis.js Timeline (to get the result of a click when the clickToUse option is set to True)?)
    问题 我在一个使用vis.js的项目中有多个时间线,由 PHP 代码生成。 时间线有一个选项,称为clickToUse ,如果将其设置为True ,则会在用户单击时间线时选择特定的时间线,从而导致其周围出现阴影轮廓。 我正在使用一个额外的 div 标题,标题和关于它下面的时间线的各种信息。 当我点击标题 div 时,我希望从代码中选择时间线(导致有阴影轮廓),所以当用户点击时间线时会发生一些事情。 如何才能做到这一点? 任何帮助,将不胜感激。 回答1 最后我想通了,这是我的解决方案。 首先,我必须使用stopPropagation ,因为基本上 vis.js 会在用户单击时间轴以外的任何其他位置时停用时间轴。 因此,单击标题 div 将在我们激活它后立即停用时间线。 查看 vis.js 代码,我发现当 clickToUse 设置为 true 时,它​​使用Activator对象来处理激活/停用。 如果设置为 false,则不会在 Timeline 对象中传播 Activator。 Activator 对象有一个可以被调用的“激活”和“停用”函数(以及其他一些)(它没有写在 vis.js 文档中)。 所以,我正在使用以下代码并且它有效: document.getElementById('headerdiv').addEventListener('click', function()
  • 如何使用angularjs在visjs中添加放大缩小按钮?(How to add zoom in zoom out buttons in visjs using angularjs?)
    问题 需要帮助使用 angularjs 在 vi​​sjs 网络图中放大和缩小按钮,我找不到任何相关选项。 请帮忙,我也提供了一个plunker链接作为例子 代码 <vis-network data="data" options="options" height="100%"></vis-network> $scope.options = { autoResize: true, height: '800', width: '100%' }; 回答1 看一下交互,navigationButtons 选项。 它具有用于缩放、平移和重置视图的内置控件。 您需要更改 vis 选项以包含navigationButtons: true和keyboard: true以启用键盘快捷键 $scope.options = { autoResize: true, height: '600', width: '100%', interaction: { navigationButtons: true, keyboard: true } }; 检查这个 plunker 回答2 我从未与 plunker 合作过,所以我无法将我的解决方案集成到您的示例中,但我已经为它创建了一个 JSFiddle,它基于来自 visjs.org 网站的一个简单网络示例。 不幸的是,目前没有可用的setScale(scale)方法
  • vis.js timeline how to add mouse over event to vis-item box-box
    I created a timeline chart by using vis.js. I have many vis-box items. Since I can display very limited information on the timeline. I therefore want to show the detail information for the item when a user mover over the item. I check documentation for timeline event at this url http://visjs.org/docs/timeline/#Events. I see how to handle select event. I am wondering how to add mouse over event for an item? Thanks. This is for select event function onSelect (properties) { alert('selected items: ' + properties.nodes); } // add event listener timeline.on('select', onSelect); how to add mouse over
  • vis.js Graph3d 条形图 - 可能的错误?(vis.js Graph3d Bar graph- Possible Bug?)
    问题 我正在使用 vis.js Graph3d 库用我的数据绘制 3D 图形。 假设 X 轴代表我的节点,Y 轴代表最近 5 小时,Z 轴代表值。 可能有几个小时没有我想表示为空白的节点的读数。 如果第一个节点在所有时间都有数据,而后续节点在几个小时内丢失数据,则这会按预期工作。 这个示例小提琴演示了它只考虑 2 个节点。 现在,如果第一个节点缺少数据,则渲染会在旋转图形时因条形相互重叠而搞砸。 这个小提琴演示了相同的。 同样嵌入到帖子中。 奇怪的是,如果您修改数据填充,而不是跳过第 2 小时的数据,而是跳过任何其他小时的数据,则图表呈现完美。 例如这个小提琴。 有人能告诉我这里发生了什么吗? 我做了一个临时解决方法,在开始时有一个额外的虚拟节点,其中 z 轴的所有值都设置为 0。如果有人建议修复,我会很高兴。 提前致谢。 var data = null; var graph = null; /** * Returns a random number between min (inclusive) and max (exclusive) */ function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } // Called when the Visualization API
  • 使用 webpack 导入 vis.js(Import vis.js with webpack)
    问题 我想使用 ES6 模块在我们的 Webpack 应用程序中仅从vis.js导入DataSet和Network 。 一种简单的方法是只导入dist/vis-network.min.js ,但它已经被缩小了,因此与我们的 webpack 工作流程不太兼容。 我查看了 vis.js 代码,它没有使用 ES6 模块,所以我无法import它们。 有没有比进行自定义 vis.js 构建更简单的方法? 回答1 不仅可以而且鼓励只导入您想在应用程序中使用的 vis.js 部分。 这使您可以仅加载项目中需要的 vis.js 部分。 关于这个主题的文档不多,但是有一个演示项目展示了如何使用 webpack 选择性地导入 vis.js 的一部分。 回答2 可以使用 vis.js 创建自己的包。 为此,您应该: 打开文件 gulpfile.js 并将配置添加到 INDIVIDUAL_BUNDLES。 例如: var INDIVIDUAL_BUNDLES = [ {entry: './index-timeline-graph2d.js', filename: 'vis-timeline- graph2d.min.js'}, {entry: './index-network.js', filename: 'vis-network.min.js'}, {entry: './index-graph3d
  • vis.js Graph3d Bar graph- Possible Bug?
    I am using the vis.js Graph3d library to plot 3D graphs with my data. Let's say the X-axis represent my nodes, Y-axis represent the last 5 hours and Z-axis represent the value. There can be hours when there are no readings for a node which I want to be represented as empty spaces. This works as expected if the first node has data for all the hours and the consequent nodes have data missing for some hours. This example fiddle demonstrates it considering only 2 nodes. Now if the first node is missing data, the rendering get's screwed up with bars overlapping each other while rotating the graph
  • 为什么我的节点悬停弹出窗口在我的 vis.js 网络中不起作用?(Why don't my node hover popups work in my vis.js network?)
    问题 我遇到了一个问题,尽管在我的节点对象中包含“title”属性,但当我将鼠标悬停在节点上时,没有显示包含我的标题内容的弹出窗口。 这是我的选项以及我如何设置网络。 setUpNetwork(){ let container = document.getElementById('mynetwork'); //These options dictate the dynamic of the network let options = { nodes: { shape: 'box' }, interaction: { dragNodes: false, dragView: false, hover: true }, layout: { randomSeed: undefined, improvedLayout: true, hierarchical: { enabled: true, levelSeparation: 180, nodeSpacing: 180, edgeMinimization: true, parentCentralization: true, direction: 'UD', // UD, DU, LR, RL sortMethod: 'directed' // hubsize, directed } }, physics: { enabled: false }