围绕节点组画一个圆圈

2024-04-09

在下面的 vis-network 中,我有 2 组节点。我通过在生成一个节点后访问节点位置将 2 组节点分为左侧和右侧layput_as_tree。现在想围绕节点组绘制一个圆或椭圆。 这是一个可重现的例子

require(shiny)
require(visNetwork)
server <- function(input, output) {
  output$network <- visNetwork::renderVisNetwork({
    edges <- data.frame(
      from = sample(1:10, 8),
      to = sample(1:10, 8),
      label = paste("interaction type", 1:8),
      length = c(100, 500),
      width = c(4, 1),
      arrows = c("to", "from", "middle", "middle;to"),
      dashes = c(TRUE, FALSE),
      title = paste("interaction name", 1:8),
      smooth = c(FALSE, TRUE),
      shadow = c(FALSE, TRUE, FALSE, TRUE)
    )
    nodes <- data.frame(
      id = 1:10,
      group = c("A", "B"),
      label = paste("Node", 1:10),
      shape = "ellipse"
    )

    # save the graph in variable
    g <-
      visNetwork::visNetwork(nodes, edges, height = "500px", width = "100%") %>% 
      visNetwork::visIgraphLayout(layout = "layout_as_tree")

    # access the x and y co-ordinates to arrange the groups
    coords <- g$x$nodes %>%
      dplyr::mutate(x = abs(x)) %>%
      dplyr::mutate(y = abs(y)) %>%
      dplyr::mutate(x = ifelse(group %in% "A", -x, x)) %>%
      dplyr::select(x, y) %>%
      as.matrix()

    #' replot the network with the new co-ordinates
    visNetwork::visNetwork(nodes, edges, height = "500px", width = "100%") %>%
     visNetwork::visIgraphLayout(
      layout = "layout.norm",
      layoutMatrix = coords,
      randomSeed = 1,
      smooth = T
    ) 
  })
}

ui <- shiny::fluidPage(
  visNetwork::visNetworkOutput("network",
    width = "1000px", height = "700px"
  )
)

shiny::shinyApp(ui = ui, server = server)

我正在完成剧本,但我必须离开……我会回来完成的。

//The nodeGraph variable should probably be ran through a transitive
//closure algorithm to simiplify it, so its not an overly complicated
//network
nodeGraph = {};


//create nodes and the beginnings of a dictionary for a directed graph
//to later be used to adjust the positions of nodes - note this is not
//the most efficient algorithm.

nodeCount = 10;

for (var i = 0; i < nodeCount; i++)
{
  var div = document.createElement('div');
  div.id = "node" + i;
  div.className = "node";
  div.setAttribute("group", (randomInt(1, 2) == 1) ? "A" : "B")
  nodeGraph["node" + i] = [];
  document.getElementsByClassName('container')[0].append(div);
}

//here I randomly create a relationship amongst nodes - but I limit it to 5 relationships just so its not too resource heavy.

//loop through each node
for (var i = 0; i < nodeCount; i++)
{
  //generate number of relationships
  randInt = randomInt(1, 5);
  
  //generate random relationships
  for (var j = 0; j < randInt; j++)
  {
    ranNum = randomInt(0, nodeCount - 1);
    //console.log(ranNum);
    while (nodeGraph["node" + i].includes(ranNum))
    {
      ranNum = randomInt(0, nodeCount - 1);
    }
    //console.log(ranNum);
    nodeGraph["node" + i].push("node" + ranNum);
  }
}

//outputs the random relationship amongst nodes
console.log(nodeGraph);

//the above code sets up the problem for what we want to achieve
//which is to essentially sort the nodes into the two "cells"

//lets get the location of the parent cells and a reference to them
groupABox = document.getElementById('GroupA');
groupABBox = groupABox.getBoundingClientRect();
groupBBox = document.getElementById('GroupB');
groupBBBox = groupBBox.getBoundingClientRect();
//then loop through every node and stick them into their respective groups
for (var i = 0; i < nodeCount; i++)
{
  currentNode = document.getElementById("node" + i);
  group = currentNode.getAttribute('group');
  if (group == 'A')
  {
    relationships = nodeGraph['node' + i];
    for (var j = 0; j < relationships.length; j++)
    {
      comparedNode = document.getElementById(relationships[j]);
      if (comparedNode.getAttribute('group') == 'A')
      {
      }
      else
      {
      }
    }
  }
}

function randomInt(min, max)
{ 
  return Math.floor(Math.random() * (max - min + 1) + min);
}
.parentNode
{
  border-radius: 100px;
  border: solid black 5px;
  height: 500px;
  width: 200px;
  position: relative;
  background-color: lightblue;
}

#GroupA
{
  float: left;
}

#GroupB
{
  float: right;
}

.node
{
  height: 20px;
  width: 20px;
  position: absolute;
  float: none;
  background-color: green;
}
<div class="container">
  <div id="GroupA" class="parentNode">
  </div>
  <div id="GroupB" class="parentNode">
  </div>
</div>

https://jsfiddle.net/Shmac/x1wf52ba/1/ https://jsfiddle.net/Shmac/x1wf52ba/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

围绕节点组画一个圆圈 的相关文章

  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • 如何向 jQuery Tokeninput 添加占位符?

    如何将占位符添加到 jQuery Tokeninput 字段 一个正常的placeholder属性在这里不起作用 对于这样的输入
  • 从 x,y 屏幕空间坐标查找 2D 等距网格上的列、行(将方程转换为函数)

    我试图在屏幕空间点 x y 的二维等距网格中找到行 列 现在我几乎知道我需要做什么 即找到上图中红色向量的长度 然后将其与表示网格边界的向量的长度 由黑色向量表示 进行比较 现在我在数学堆栈交换中寻求帮助 以获得用于计算点 x y 与黑色边
  • 在 R 中显示变量的精确值

    gt x lt 1 00042589212565 gt x 1 1 000426 如果我想打印的确切值x 我该怎么办呢 抱歉 如果这是一个愚蠢的问题 我尝试在谷歌上搜索 R 和 精确 或 圆形 但我得到的只是有关如何舍入的文章 先感谢您 所
  • Flask wtf.quick_form 运行一些 javascript 并设置表单变量

    我正在创建博客文章 到目前为止已经使用普通的 html 表单完成了 我所做的一个有趣的想法是运行 javascript onclick 并使用页面中的额外数据在表单中设置一个隐藏变量 这很好地传递到服务器并通过 request form 获
  • JavaScript 动画平滑滚动

    默认情况下 当您有这样的片段链接时 a href some url some fragment some text a 浏览器立即向下滚动到该片段 我该如何编程才能使用标准 JS 顺利地向下移动到该片段 这是一个例子 Example htt
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • v-file-input .click() 不是函数

    我试图以编程方式触发 v file input 的 click 事件 因为它在 Vuetify 的文档中 但它显示一个错误this refs imagePicker click is not a function我在这里错过了什么吗 代码重
  • AJAX:检查字符串是否为 JSON?

    我的 JavaScript 有时会在这一行崩溃 var json eval this responseText 当争论时会导致崩溃eval 不是 JSON 在进行此调用之前有什么方法可以检查字符串是否为 JSON 我不想使用框架 有什么方法
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • 使用 dplyr 对连续变量进行分类[重复]

    这个问题在这里已经有答案了 我想基于连续数据创建一个具有 3 个任意类别的新变量 set seed 123 df lt data frame a rnorm 100 使用基地我会 df category df a lt 0 5 lt low
  • autoplot.microbenchmark 实际绘制了什么?

    根据文档 microbenchmark autoplot 使用 ggplot2 生成更清晰的微基准计时图 凉爽的 让我们尝试一下示例代码 library ggplot2 tm lt microbenchmark rchisq 100 0 r
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • 如何绘制 Voronoi 曲面细分的多边形而不是线段?

    我找到了一种使用 ggplot2 绘制 Voronoi 曲面细分的分段的方法 library deldir library ggplot2 library ggthemes set seed 123 df lt data frame lat
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标

随机推荐

  • 在 SQL 中添加额外的 Where 子句会严重影响性能

    我有一个运行多个视图和表的 SQL 查询 查询运行良好 但当我在 WHERE 子句中添加另一个条件时 它开始对性能产生巨大影响 查询的结构类似于 SELECT a FROM vw myView a LEFT OUTER JOIN tbl1
  • 从 API 返回字符串文字

    我正在编写一个用户 API 这样返回 const char 值是否正确 const char returnErrorString int errorCode switch errorCode return This error code m
  • 为什么不能使用整数作为 C# 中 while 循环的条件? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 使用如下所示的 while 循环时出现错误 我不明白为什么 int count 5 while count here s
  • 如何在 Mysql 5.7 中更新 JSON 数组中的特定对象

    如何根据对象中的唯一值更新数组中的对象 假设这是我的 json 对象 存储在名为对象的表和名为内容的列中 table objects id 7383 content data id 111 active 1 id 222 active 1
  • 视图中嵌套的 ForEach(和列表)会产生意想不到的结果

    在 SwiftUI 视图中的另一个 ForEach 中执行一个 ForEach 会产生意想不到的结果 几乎就像它们踩在彼此的计数器上一样 不清楚发生了什么 我需要显示多分支数组并尝试了多种变体 但仍然遇到同样的问题 我有几个项目就出现过这种
  • 从 dict 列表中删除一个项目并分割 stdout_lines

    我试图从字典列表中删除一个项目 即 未找到结果 的项目 validar LPARNAME No results were found LPARNAME server1 server2 server4 LPARNAME server3
  • AutoHotkey-GDIp:从硬件加速窗口捕获屏幕截图

    我目前正在编写一个小脚本 该脚本可以从 BlueStacks 中的硬件加速窗口捕获屏幕截图 问题是 看起来窗口必须是硬件加速的 因此屏幕捕获保存了一个黑色方块 我使用 AutoHotkey 编写脚本 并添加了 GDIp 库来访问 GDI 我
  • 将每个Python字典值除以总值

    我有a foo 2 bar 3 baz 5 无论如何我能得到吗a foo 0 2 bar 0 3 baz 0 5 在一行 需要将每个值除以总价值 我只是无法完成它 太感谢了 对值求和 然后使用字典理解生成具有标准化值的新字典 total s
  • 如何在 python 中禁用 lambda 的默认日志消息

    我有一个用 python 编写的 AWS Lambda 函数 我只需要在 CloudWatch Logs 中记录的消息 我已经尝试了watchtower中给出的例子 但它仍然不起作用 START RequestId d0ba05dc 850
  • 如何使用特定日期的 Sitecore 项目进行 Lucene 搜索?

    我的内容项目是 Sitecore 其日期字段名为 EventDate 我想使用 Lucene Net 搜索具有特定日期的项目 下面是我尝试过的代码 但没有得到结果 var index SearchManager GetIndex event
  • JNLP应该使用特定的Java版本但错误结果

    我在这里面临一个问题 我想使用一个特殊版本来运行我们的 java webstart 应用程序 但仅用于一个 jnlp 经过测试 blabla 我们不能使用新版本 blabla 随机的风袋 所以我尝试像这样配置我们的 JNLP
  • z3 中的函数声明

    在 z3 中是否可以声明一个以另一个函数作为参数的函数 例如 这个 declare fun foo Int Bool Int 似乎不太管用 谢谢 正如 Leonardo 提到的 SMT Lib 确实not允许高阶函数 这不仅仅是语法限制 使
  • 如何创建控件数组?

    我必须创建一个数组并将所有控件放置在那里才能访问它们 这是一个简短的示例 unit Unit1 interface uses Windows Messages SysUtils Variants Classes Graphics Contr
  • OSX 10.8 中 usetex 的问题

    我最近升级到 OSX 10 8 Mountain Lion 如果我尝试在绘图标签中使用乳胶标记 我的 python 安装现在会出现错误 下面的代码可以完美运行 plt figure plt plot rand 51 rand 51 plt
  • 在Windows窗体中鼠标悬停时显示图像?

    我正在使用 Windows 窗体进行 C 项目 我和我所在的小组想要做到这一点 以便当用户将鼠标悬停在图像 在我们的例子中是一张卡片 上时 该卡片的较大图像会出现在鼠标箭头旁边 就像工具一样小费会起作用 我不认为你可以使用工具提示来做到这一
  • AngularJS:当多条消息更改消息的 ngModel 时,警报不会显示

    我有一个通知服务 在加载页面和加载控制器时效果很好 但是 当我有不同的按钮调用不同的功能时 它们会更改消息 但不会显示警报 这是一个笨蛋 http plnkr co edit YioiJXNkaET6T2mexjCq p preview h
  • 如何在没有X的Linux上安装Oracle 11g?

    我尝试从以下位置安装 Oracle 客户端http www oracle com technetwork database enterprise edition downloads 112010 linx8664soft 100572 ht
  • Xcode 4:自动完成和跳转到定义在我的 Xcode 3 项目中损坏

    我的项目是在 Xcode 3 中创建的 我在 Xcode 4 中打开它并注意以下内容 跳转到定义 不再适用于我自己的符号 但是 UI 甚至 TT 符号确实可以正常工作 自动完成 代码感知 和 Xcode 3 一样糟糕 也就是说 它建议一切
  • 为什么当我重新绑定c++的引用时,编译器不报告错误

    c Primer 2 3 1 说 一旦初始化 引用将保持绑定到其初始对象 无法重新绑定引用以引用不同的对象 但我的代码运行良好 include
  • 围绕节点组画一个圆圈

    在下面的 vis network 中 我有 2 组节点 我通过在生成一个节点后访问节点位置将 2 组节点分为左侧和右侧layput as tree 现在想围绕节点组绘制一个圆或椭圆 这是一个可重现的例子 require shiny requ