ノードグループの周りに円を描く
次の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)
回答
1 ShanerM13
スクリプトを終了している最中ですが、終了する必要があります...終了するために戻ってきます。
//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
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();
}")