问题标签 [vis.js-network]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
823 浏览

javascript - vis.js 网络 - 是否有设置使节点标签在缩放时保持相同大小?

基本上是标题。客户抱怨当他放大时,节点的文本标签非常大。即使在放大或缩小时,有没有办法将节点标签保持在固定的字体大小?

从节点文档(http://visjs.org/docs/network/nodes.html)中,有一个 scaling.label 选项,但它似乎不起作用。我认为这仅在我使用值来缩放节点时才有意义。

0 投票
0 回答
1259 浏览

javascript - Vis.js 网络:如何提取节点(和边)的自定义选项?

我正在使用 vis.js/network 开发一个简单的图形编辑器。由于编辑器必须存储网络状态,我有一个保存助手,我从网络中提取数据并将其存储为 JSON。

目前,我使用看似相当丑陋/骇人听闻的方式来提取数据进行存储:

如您所见,我手动提取了这些属性(idlabelxy)并storedNodes为每个节点(或边缘)设置了 。我需要保存也更改的属性——只有那些非默认(自定义)的。就像如果某个边缘有一个arrows集合,"to"我想保存它(但不是arrows:false每个边缘);或者如果一个节点具有自定义的形状或颜色,我想保存它而不保存每个节点的所有颜色、形状、字体大小等。

所以,我的问题是:如何获取节点的自定义属性?有什么帮手吗?还是我必须迭代和比较几棵树(默认选项和实际选项)?有什么建议么?

PS 好的,查看整个方法列表告诉我,很可能没有真正的帮助者来完成这项任务(除非getOptionsFromConfigurator它在没有配置器的情况下工作,但它似乎只告诉全局选项,而不是节点或边的选项)。因此,我将检查getOptionsFromConfigurator然后转到搜索要迭代和比较的属性。network.body.nodes[id].nodeOptions看起来network.body.edges[id].edgeOptions很有希望。另一件事是使用vis.DataSet(我应该尝试访问nodescreated asnew vis.DataSet(nodes)并查看它们是否获得默认选项和自定义选项)。

0 投票
0 回答
444 浏览

vis.js - Vis.js 每组物理

在此处输入图像描述

我将首先描述我想要实现的目标。所附图像是我得到的最接近的图像。

  1. 3 个蓝色 Hexes 应该都接触。
  2. 粉红色的Hexes应该都水平运行。
  3. 白色(和一个红色)应该大致从绿色流向它们附着的粉红色。所有这些链接的长度都应该一致。
  4. 黄色应该从橙色开始做同样的事情。

只要没有附加其他十六进制,我就能够实现#1。我想如果我能让这 4 组不受彼此物理的影响,我就能得到我正在寻找的东西。白色和粉红色以及黄色和粉红色之间的连接可以比白色和橙色之间的连接更长,以使其“适合”。

有 4physics: false个节点连接到绿色、左粉色、橙色和所有三个蓝色。该fixed属性似乎更合适,但是当以这种方式定位时,节点似乎忽略了xandy值。这些用于将图形拉成形状。我也对替代方法持开放态度。

有没有另一种方法来实现我正在寻找的东西?至少有没有办法强制粉红色节点更喜欢水平运行?

我尝试了各种物理求解器。默认的 barnesHut 是我目前使用的。

vis.js 4.21.0 在 chrome 中渲染

0 投票
1 回答
841 浏览

javascript - vis.js 超链接边缘

是否有可能获得在边缘工作的超链接?

例如,我有两个连接的节点,并且有一个标签

因此,对于上述情况,使用此选项时,该 url 适用于节点

现在我使用标准配置在两个节点之间建立了链接

是否可以让超链接在连接两个节点的线路/边缘上工作?

0 投票
0 回答
73 浏览

vis.js - vis.js 节点未在 UI 中稳定

我正在使用 vis.js 来可视化我的网络。传递给这个库的节点和边的数量分别约为500 和 2000

早些时候,当我的代码添加节点和边时,浏览器在处理 1000 条边后会变得无响应。我在选项中包含了以下参数。

options.layout = {improvedLayout : false}添加后,我可以在屏幕上获得输出。然而,节点并没有解决,他们似乎需要时间来适应布局。层次结构也看不清楚。

如何使用 vis.js 以分层方式正确显示所有节点和边?我必须添加哪些附加参数?

0 投票
0 回答
749 浏览

javascript - vis.js onclick 不显示当前节点

我正在用javascript制作一个应用程序来处理来自json对象的数据并显示它并以漂亮的方式过滤它。示例 1 示例 2

然而,当我深入到下一个选择时,我遇到了各种问题。问题是我的onclick事件仍然同步到旧节点列表而不是新节点。正如您从屏幕截图中看到的那样,让花朵出现在正确的节点上曾经是一个问题,但我通过将 ids 映射到坐标发现了一个肮脏的 hack。然而,我想最终解决这个问题,因为这真的很令人沮丧。

http://shrani.si/f/2E/Tb/1bQrSkhW/firstlevel.png

http://shrani.si/f/3u/dO/4uPNhGCt/secondlevel.png

正如您所看到的,图表本身会更新,但点击事件仍然说我点击了一个不存在的节点。

我不妨粘贴尽可能多的代码,所以这里是主要部分:

以下是我用来更新的一些功能:

我想我应该以某种方式动态地将我的事件处理程序放在某个地方,但我不确定如何并且正在寻找一些好的建议。

0 投票
1 回答
989 浏览

javascript - 在不使用工具栏 visJs 的情况下添加 Edge

Vis.js 提供了一个工具栏,通过单击工具栏上的按钮来添加节点和边。
我想要一种方法,这样我就可以在拖放节点上添加边缘。
我已经搜索过,但没有找到任何关于如何在单击一个节点时创建边缘并在其他节点上拖动以在它们之间创建边缘而不使用此处提供的工具栏的实际示例。

谢谢

0 投票
1 回答
2171 浏览

angular2-services - 如何从 VIS.js 网络获取所有节点 ID

我想检索已呈现的 vis.js 网络的所有节点的 ID。我怎样才能做到这一点?

对此的任何指针表示赞赏。

0 投票
1 回答
1126 浏览

reactjs - vis.js 网络:边缘颜色未显示在 react.js 应用程序中

通过 React 应用程序渲染网络可视化时,我遇到了边缘颜色问题。

我有一个包含网络的 MindMapComponent。

我通过组件的道具接收网络数据:

然后我继续在我的componentDidMount函数中创建网络:

最后在我的渲染函数中渲染整个东西

最终的网络应该是这样的(在普通的 html+js 应用程序中呈现)。

但是在我的反应应用程序中,边缘的颜色不显示

我查看了网络数据结构的内部(通过console.log(network)组件末尾的挂载)。body.data.edges结构部分包含 正确的颜色值。但是该body.edge.[id].options.color部分是空的

我相信这是我问题的根源,但不确定我的分析是否正确或如何解决它。

0 投票
1 回答
4020 浏览

javascript - Vis.js 网络节点定制:卡片作为节点

我想建立一个网络,其中节点代表结构类似于卡片的信息。对于卡片,我的意思是由两个区域组成的结构:

  1. 多行文本区域,我可以在其中放置来自不同资源的信息,例如姓名、电话号码、地址和
  2. 控制区域,我可以有 2-3 个按钮(最好带有图标)来最大化节点,或者使节点成为根/主节点等。

据我从 vis.js 文档中看到的示例,可以输入段落/文本作为节点标签,但无法通过 Html 构造节点。

我可以通过使用 vis.js/Network 来达到这个目的,还是应该去另一个库?