天道酬勤,学无止境

How to use vis.js with map

I am trying to build a network visualization with vis.js and display it on a map (similar to Geo-layout in Gephi). Do you happen to know if something already exists to achieve such goal? (I don't even need to use vis.js if you have suggestions)

So far I tried/thought of using mapbox but I abandoned the idea of a real map because it it turning out to be fairly complex.

I downgraded expectation to doing the following:

  • done: have an image of a map in the background and have some big nodes that I can position manually by tweaking the x and y position

I still need to do the following:

  • Make the small nodes automatically fall into place as if it was a forced layout.

The problem is that I need to disable physics if i need to manually set some positions... this of course stops the smaller nodes from being automatically positioned.

any hints on how to achieve this?

Thanks!

评论

I ended doing the following, in options set the layout and physics. (for some reason, improved layout has to be false, it was a lucky guess)

layout: {  improvedLayout: false }

physics: { enabled: true}

For the node, set a property called fixed:

fixed: { x: true , y: true } 

Here is the son of the node:

{id: 1,  value: 2,  label: 'xx' , x: 320, y:170 ,  fixed: { x: true , y: true } }

受限制的 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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • import json file to create a network in vis.js
    I am using vis.js to create a mapping, I using file saveAndLoad.html in the example code. The save function is good, I can export json file. But when I load the json file in import function it doesn't create a mapping for me. I don't know what is my misunderstanding please help. this is the import function. function importNetwork() { /*var inputValue = exportArea.value; var inputData = JSON.parse(inputValue); var data = { nodes: getNodeData(inputData), edges: getEdgeData(inputData) } network = new vis.Network(container, data, {});*/ var gephiJSON = loadJSON("./1.json"); // code in importing
  • 在 vis.js 中导入 json 文件以创建网络(import json file to create a network in vis.js)
    问题 我正在使用 vis.js 创建一个映射,我在示例代码中使用了文件 saveAndLoad.html。 保存功能不错,可以导出json文件。 但是当我在导入函数中加载 json 文件时,它不会为我创建映射。 我不知道我的误解是什么,请帮助。 这是导入功能。 function importNetwork() { /*var inputValue = exportArea.value; var inputData = JSON.parse(inputValue); var data = { nodes: getNodeData(inputData), edges: getEdgeData(inputData) } network = new vis.Network(container, data, {});*/ var gephiJSON = loadJSON("./1.json"); // code in importing_from_gephi. // you can customize the result like with these options. These are explained below. // These are the default options. var parserOptions = { edges: { inheritColors
  • vis.js-手动放置节点(vis.js - Place node manually)
    问题 如何在vis.js中设置节点的位置? 我想最初至少手动定位一个节点。 我知道一个节点具有选项x和y 。 我同时设置了这两种设置,还尝试了各种布局选项( randomSeed ,改良版布局,分层),该节点从未放置在我设置它的位置。 这是我定义的简单网络: nodes = new vis.DataSet([ {id: 1, shape: 'circularImage', image: DIR + '1_circle', label:"1", x: 200, y: 100}, {id: 2, shape: 'circularImage', image: DIR + '2_circle', label:"2"}, {id: 3, shape: 'circularImage', image: DIR + '3_circle', label:"3"}, ]); edges = [ {id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'}, {id: "02-03", from: 2, to: 3}, ]; var container = document.getElementById('graphcontainer'); var data = { nodes: nodes, edges: edges }; var options
  • VISJS:将操作数据保存到 json(VISJS: save manipulated data to json)
    问题 我正在使用 vis.js 在网页上创建网络图。 我的需要是以 JSON 格式将操作图存储到数据库中,从网络图中导出 json。 我没有找到任何有关它的文档,是否可以使用操纵数据导出 vis.js 网络以进行存储(以 JSON 或可转换为 JSON 的形式)? 回答1 至于data ,这是我提取它以进行存储的 hacky 方法(我将尝试切断与问题无关的代码位): // get nodes and edges var nodes = network.body.data.nodes._data; // contains id, label, x,y, custom per-node options and doesn't contain options from options.nodes; presumably contains option values set when network was created, not current ones (it is so for x,y) // network.body.nodes[id].nodeOptions shows options from options.nodes but not custom per-node options (same for edges and network.body.edges[id]
  • 使用 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 中隐藏图形的分支?(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 crossed edges in 4.21 hierarchical graph
    Problem: After switchnig to new (4.21) version of vis.js (from 4.18) my graph is all messed up. EDIT: The change occurs between versions 4.19.1 and 4.20. I guess it has something to do with multiple changes in network introduced in the 4.20 version. I'm building a family free. I spent some time to get a nice looking graph. Then I found out that new version of vis.js is available. Once I decided to use it, the edges of my graph started to cross. Here's my nice-looking graph using 4.18.1: Here's what happens if I change to 4.21.0: What did I do wrong? How to fix this? Same data, same code. The
  • vis.js 4.21 分层图中的交叉边(vis.js crossed edges in 4.21 hierarchical graph)
    问题 问题:在切换到新的 (4.21) 版本的 vis.js(从 4.18 开始)后,我的图表全都搞砸了。 编辑:更改发生在 4.19.1 和 4.20 版本之间。 我猜这与 4.20 版本中引入的网络的多项更改有关。 我正在建立一个免费的家庭。 我花了一些时间来获得一个漂亮的图表。 然后我发现新版本的 vis.js 可用。 一旦我决定使用它,我的图的边缘就开始交叉。 这是我使用 4.18.1 的漂亮图表: 如果我更改为 4.21.0,会发生以下情况: 我做错了什么? 如何解决这个问题? 相同的数据,相同的代码。 唯一的区别是: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> 代替 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script> 这是 4.18.1 小提琴和 4.21.0 小提琴。 以及下面带有 4.21.0 参考的完整代码: // create an array with nodes var nodes = new vis.DataSet([ {id
  • 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 网络的缩放?(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 时间轴引发点击事件(以在 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()
  • How to hide graph's branch in 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
  • How to make Network visualization work in vis.js with Angular?
    I've installed the dependencies I need through: vis.js: npm install vis --save @types/vis: npm install @types/vis --save-dev Code snippet: import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; import { Network, DataSet } from 'vis'; @Component({ selector: 'test', template: '<div #network></div>' }) export class TestComponent implements AfterViewInit { @ViewChild('network') el: ElementRef; private networkInstance: any; ngAfterViewInit() { const container = this.el.nativeElement; const nodes = new DataSet<any>([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id
  • vis.js 最小化交叉边缘(vis.js minimize crossed edges)
    问题 我是 JavaScript 的新手,并使用 vis.js 来制作分层(“UD”)网络。 我有一个问题:同一水平面上的许多边交叉。 vis.js 中有没有办法最小化交叉边缘? 在我有一个简单树的示例中,根本不应该有交叉边。 即我想要类似的东西而不是 我的问题与层次布局中的 vis.js 级别排序有关 这是我的 vis.js 选项: var options = { edges: { smooth: { type: 'cubicBezier', roundness: 0.4 } }, layout: { improvedLayout: true, hierarchical: { direction: "UD" } }, physics:false }; 回答1 请尝试使用较旧版本的 vis.js:许多人报告说,使用 4.18.1 修复了他们的分层布局中顺序错误的问题(不过,他们在布局没有这些水平链接时遇到了麻烦)。 如果有帮助,请向线程报告(无论如何,降级不是一个好的解决方法)。 PS 还有另一个问题,他们报告问题发生在 4.19.1 → 4.20.0 升级之后。 回答2 您可以考虑使用 https://github.com/d3/d3-hierarchy 来执行布局。 以下(伪)代码详细说明了该方法: // copy vis network into d3 tree
  • How to limit zooming of a vis.js network?
    I've implemented a simple network using vis.js. Here's my code: //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
  • 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 网络中不起作用?(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 }
  • 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
  • 如何使用visjs在时间线上绘制折线图?(How to draw line graph on timeline using visjs?)
    问题 是否可以使用visjs在时间轴上绘制折线图? 我想在这里得到类似的东西 http://almende.github.io/chap-links-library/js/timeline/examples/example19_bar_graph.html 但不是条形图,我需要折线图。 本质上的问题是,是否可以像下面的示例一样在同一画布上获取时间轴和 graph2d? 回答1 借助此处同步到时间线的演示以及我自己的一些实验,以下内容似乎做了类似的事情。 你可能可以稍微调整一下以获得你想要的。 控制台警告"WARNING: infinite loop in redraw?" 在这种情况下,缩放 graph2d 部分似乎是 vis.js 中的一个错误,因为在时间轴上缩放时不会发生这种情况 - 在任何情况下,它都不会影响功能 // create a couple of HTML items in various ways var item1 = document.createElement('div'); item1.appendChild(document.createTextNode('item 1')); var item2 = document.createElement('div'); item2.innerHTML = '<span>item 2</span>'; var
  • 将 .gs(Google Apps 脚本)中的数据共享到 variable in html(Share data from .gs (Google Apps Script) to <script> variable in html)
    问题 [ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] 你好! 在以下代码中,函数getArray()返回此字符串 ↑。 你知道如何将它与 .html 中的变量节点连接起来吗? 我贴了代码,谢谢! function getArray(){ var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); const data = ss.getRange(1,1,ss.getLastRow()-1,2).getValues(); let objArray = [] data.forEach(element => { let obj = {} obj.id = element[0] obj.label = element[1] objArray.push(obj) return element } ) var obj = JSON.stringify(objArray); //Logger.log(obj); return obj; } <!doctype html> <html> <head> <title>Network</title> </head