ノードグループの周りに円を描く

4
user5249203 2021-01-06 07:13.

次の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)

2 answers

1
ShanerM13 2021-01-25 13:01.

スクリプトを終了している最中ですが、終了する必要があります...終了するために戻ってきます。

//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/

1
user5249203 2021-02-01 22:59.

visEventsを使用してJavascriptコードを渡すことで、ノードグループの周りに円を生成することができました。

graph %>%
    visNetwork::visEvents(type = "on", beforeDrawing = "function(ctx) {
    ctx.fillStyle = 'rgba(255, 0, 255, 0.1)';
    ctx.ellipse(-180 , 25, 150, 280 , 0, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = 'rgba(64, 255, 255,0.1)';
    ctx.ellipse(180 , 25, 150, 280, 0, 0, 2 * Math.PI);
    ctx.fill();
}")

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

3年ぶりにエクアドルで捕まったマーク・ザッカーバーグを振り下ろそうとした男

3年ぶりにエクアドルで捕まったマーク・ザッカーバーグを振り下ろそうとした男

マーク・ザッカーバーグは2018年4月に議会で証言しました。数年前、ポール・セグリアという男がFacebookのCEOであるマーク・ザッカーバーグに対して数百万ドルの訴訟を起こしました。 -サイトの所有権。

スキンのファンエリアへの乱闘流出-ジェット共同練習

スキンのファンエリアへの乱闘流出-ジェット共同練習

ジェッツとスキンズは、日曜日の午後、ワシントンのリッチモンドトレーニングキャンプでの合同練習に参加しました。たまたま、2つのチームの間で事態が熱くなり、いくつかの小競り合いが発生し、最終的には大騒ぎになりました。ワシントンの攻撃的なプレーが終了した後、プレーヤーはお互いに叫んでいたようです。ワシントンの後半のヒットはモーガンモーゼスに取り組みます。

エドワードノートンのスモーキーでスターがちりばめられたジョナサンレセムのマザーレスブルックリンの適応の予告編を見る

エドワードノートンのスモーキーでスターがちりばめられたジョナサンレセムのマザーレスブルックリンの適応の予告編を見る

エドワードノートンは、ジョナサンレセムのジョイシアン1999年の小説マザーレスブルックリンが出版されて以来、スクリーンに登場させたいと考えていました。20年後の今、ハードボイルドストーリーの予告編が到着しました。これは、レセムのストーリーを1950年代に戻し、多くの見慣れた顔を牽引します。

偶発的なキティ猫フィルターはパキスタンの大臣の深刻なライブストリームを弱体化させます

偶発的なキティ猫フィルターはパキスタンの大臣の深刻なライブストリームを弱体化させます

事件の芸術的な再現。いいえ、ShaukatYousafzaiは毛皮ではありません。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で 1 日を過ごし、ジェニファー・ロペス、ジュリアン・ハフなども。ハリウッドからニューヨークまで、そしてその間のあらゆる場所で、お気に入りのスターの活躍をご覧ください!

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

捜査官は、グループと容疑者が攻撃の前にお互いを知っていたかどうかを調べています

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

2021 年には、サービスを提供する顧客と顧客に伝えるストーリーについて知っていることをすべて再考することをお勧めします。あとずさりする。

マンモスロスは私の心を愛に開いた

マンモスロスは私の心を愛に開いた

フェリックス ザ キャットの 9 歳の誕生日の日に、大人になってからの最大の損失の 1 つである 2013 年のソフィーを思い出します。私はこのエッセイを書き、2013 年にこのプラットフォームで簡単に共有しました。

あなたがインターネットがあなたに望んでいる人になれないとき

あなたがインターネットがあなたに望んでいる人になれないとき

私は「列車事故」という言葉が嫌いです。人々は自分自身の道徳的羅針盤に安らぎを覚え、そうすることで自分自身が判断を下していることに気づきます。

DFINITY ブロックチェーンの分散型クラウド ビジョン

編集者注: アーカイブ目的で保存されている DFINITY ブログの古い資料を表示しています。

DFINITY ブロックチェーンの分散型クラウド ビジョン

この投稿では、DFINITY チームの分散型クラウドのビジョンと、それが従来のブロックチェーンやアマゾン ウェブ サービスなどの既存のクラウド プロバイダーとどのように関連しているかを探ります。大規模なネットワークによって適用される DFINITY テクノロジのデモンストレーションが 2017 年の秋に行われ、その後、非営利財団を支援するための主要な資金調達が行われ、「オープン クラウド」ネットワークは 2018 年の初夏に開始される予定です。 .

Language