问题标签 [vivagraphjs]

我需要在图形节点上插入鼠标单击事件，但所有方法都不适用于我。

我完成图表的代码是这样的：

我尝试了很多这样的方法来做鼠标悬停事件

我正在使用VivaGraph.js来绘制图表

一些解决方案？

我正在开发一个社交网络可视化组件。我正在使用 Vivagraph 库，但是当我添加未连接到另一个节点的节点时，图形会超出容器。这是我的实现。请帮忙，这对我很重要。

这是我的 javascript 文件。

我使用 vivagraph 将 svg 嵌入到 div 中（作为背景）它工作正常，但是 vivagraph 提供交互（滚动缩放）无论如何都可以删除与 svg 的那种交互？

我试图将 eventlistner 绑定到 svg 并通过那里禁用它。

有没有一种简单的方法可以说“不要与 svg 交互只是向下滚动”？

谢谢

我正在尝试实施vivagraph. 然而，它总是在右下角的某个地方显示整个图表。从萤火虫看起来g tag正在得到很多矩阵变换。

问题是我在页面的每个视图中动态增加/减少节点，所以我不能用 1 single 覆盖它translate。那么有没有办法让它完成呢？

我一直在使用 VivaGraphs 进行网络分析，但我对 JavaScript 和 SVG 和 WebGL 的概念非常陌生。我已经能够使用 SVG 和 WebGL 创建漂亮的网络，需要您提供一些建议：

1. 在渲染大型网络时，我觉得 WebGL 比 SVG 快得多。我在具有 80k 边和 20k 节点的网络上进行了尝试。我的这个假设是对的吗？

2. SVG 更容易自定义节点和边缘的外观，WebGL 限制太多（或者可能是我缺乏知识）。您是否相信 SVG 在定制方面给了我更大的灵活性？

3. 我注意到的一件事是我需要在一段时间后暂停我的图表，否则我的图表中的集群会继续漂移。无论如何，我可以限制我的图形坐标，使其永远不会超出我的屏幕尺寸？

4. 我遇到的 WebGL 的一个主要问题是，当我暂停渲染时，我的代码都不起作用（例如节点悬停、单击等事件）。但是当我恢复它的那一刻，它就起作用了。在 SVG 中情况并非如此。我的悬停，即使渲染器暂停，节点上的单击功能也能正常工作。就我而言，这是一个很大的亮点。你认为有办法对付这种情况吗？

我让自己陷入了一个巨大而奇怪的境地。我使用VivaGraph JS在浏览器中绘制概念图。我正在使用的具体实现依赖于 SVG，因此我的主要图形 DOM 元素是一个 SVG。

在节点之间创建边缘的过程中，我使用Paper.JS编写了一小段代码，它使用 HTML5 中的画布。事实上，我侵入了vektor.js提供的源代码，并简单地将其更改为监听 CTRL+MouseDown 事件。

这两个元素，svg 图和画布，重叠并且具有完全相同的尺寸。该图有节点和边缘被操纵，它们监听鼠标和键盘事件，遗憾的是我的画布也是如此。

实际上，使用画布的原因是我想在鼠标移动期间绘制一条线（矢量或边缘或弧线），以便在我实际创建之前向用户显示正在创建的边缘是什么图中的边。

我无法使用 SVG 来做到这一点（是的，我知道，它应该是可行的），而 Paper.js 让我非常容易做到这一点。

遗憾的是，根据这些 DOM 元素的显示顺序，要么画布捕获事件，使图形无用，要么图形捕获所有事件，使画布无用。

有没有办法为两个 DOM 元素添加透明度？

图的事件监听器，内置在 VivaGraphJS 中，而 Paper Vertex 的事件监听器，内置在 Paper.JS 中

理想情况下，我希望将图表放在顶部，捕获事件，然后将它们传播回画布，以便绘制箭头。我觉得这应该是可行的，无论是通过纯 JavaScript，还是使用 jQuery。

到目前为止，图表中捕获的事件如下所示：

所有这些都发生在一个文件 graph.js 中。在另一个文件 edge.js 中，我设置了事件侦听器和绘制矢量的方式。我已将它添加到jsfiddle但遗憾的是它不会在那里运行（我猜键盘事件可能无法正确传播？）。

问题是 Paper.Js 有自己的事件监听器：

显然，这些事件在纯 JavaScript 和 jQuery 中具有等价物，但我在 VivaGraphJS 或 jQuery 中捕获的事件不能传播到 PaperJS，因为它们是不同的对象。

那么，我能否以某种方式（最好使用纯 JavaScript，但 jQuery 也可以）模拟或将这些事件发送到 Paper.JS？

这是我必须解决的要求，所以我想我会发布我用于其他人的解决方案。

我需要一个按钮，可以让我将 VivaGraph SVG 渲染保存为 PNG。

我正在尝试在图中异步填充节点的数据。

如何确保异步获取的数据实际上绑定到图，并在准备好时呈现？

首先，渲染图形结构、节点和链接。其次，当数据准备好时，您将数据呈现为节点的属性。新节点可以通过与父节点交互动态添加，不需要等待节点属性完成。

请注意我正在使用 Vivagraph.js 库。graph是使用库创建的对象，addLinks()并且getNode()是它的函数属性 - 请参阅Vivagraph 演示中的演示，我将其用作我尝试的草稿。

我遇到的问题是节点在添加后立即在图中呈现 - addNode()或addLinks(node1, node2)函数 - 而节点的属性是异步获取的 - getNode(node).property = updatedValue - 结果undefined。

已编辑-基于注释的简化代码

下面我包含一个工作模型版本，基于这个（真棒）库的作者@Anvaka 提供的教程。

我的目标是立即渲染图表，在从第三方获取数据时启用交互和更新数据。

无论如何要更改线条粗细默认值？

我知道不幸的是，没有任何方法可以动态更改线路规格。只能更改颜色。但是，如果有人知道改变线条粗细的方法，那将非常有帮助。

我正在使用 Vivagraph JS 库来渲染一些图形。

我想像这样改变节点的颜色

nodeUI.color = 0xFFA500FF;

^ 这是一个随机的例子。不是下面 RGB 对应的十六进制值

我从服务器 RGB 值作为这样的数组获取

rgb = [229,64,51]

如何将 RGB 转换为上面提到的十六进制类型值？

谢谢