r语言 - 是否可以在闪亮的应用程序(renderGrViz)中选择图形可视化节点，然后链接到其他信息?

Question

我想在我的闪亮应用程序中的中央图形可视化节点添加一个功能(弹出框或其他功能？(，当通过鼠标单击选择时，它们会显示信息(例如centre_nodes文件中的信息列(。鉴于这些节点有一个工具提示属性，我认为/希望计算机必须"看到"它们，但我还没有找到一种方法来连接两者并建立这种行为......

我已经探索了各种方法(例如reactR，html标签，hover.css，shinyBS，d3，pipeR，XML，htmltools(，但认为一定可以用css或htmlwidgets来做，但我对这段代码的了解有限，我还没有找到解决方案。我有一种感觉，对于熟悉这种类型的编码的人来说，它很简单......

这是一个使用DiagrammeR和grViz的闪亮应用程序示例：

library(DiagrammeR)
library(shiny)
ui = shinyUI(fluidPage(grVizOutput('graphV'))) 
server = function(input, output) { 
output$graphV <- renderGrViz({ 
grViz( "digraph test{
A[tooltip='A word']; 
B[tooltip='Another word'];
A -> B;}" )
})}
shinyApp(ui = ui, server = server)

希望的结果是我可以通过单击选择一个节点，然后将显示与该节点关联的信息。通过工具提示功能，我可以滚动到节点上并显示信息，但对单击的响应在美学上更具吸引力。即使能够更改工具提示的外观也将是对当前内容的改进。

任何帮助都非常感谢！

Answer 1

这是关于如何根据被单击的元素添加 html 元素的草稿。也许您可以详细说明您希望将它们放置在何处，或者如果您也可以添加其他闪亮的元素(会更容易(。

下面代码中的想法是添加一个 onclick 侦听器。捷径是用shinyjs实现它。元素的标识符似乎是node1、node2等。

然后有多种选择。将这些信息返回给"R/Shiny"，并通过Shiny.OnInputChanged(...)添加闪亮元素或通过javascript附加html元素。 使用Shiny.OnInputChanged(...)更容易，所以我尝试让第二个也工作。下面给出了一个例子。

在图形中添加新的html元素并将它们放在图形前面并不简单。人们可以通过校准 css 来实验以将其显示在前面(style="z-index: -1"(，但也许进一步指定最佳解决方案是一个很好的点。

(为了完整起见，添加的元素当然也可以删除，以便一次只显示一个"工具提示",...(

可重现的示例：

library(DiagrammeR)
library(shiny)
library(shinyjs)
texts <- c("Great div for A", "Even better div for B")
jsCode <- paste0("
elem = document.getElementById('graphV');
var node = document.createElement('div');
var textnode = document.createTextNode('", texts,"');
node.appendChild(textnode);
elem.appendChild(node);
")
ui = shinyUI(
fluidPage(
useShinyjs(),
grVizOutput('graphV')
)
) 
server = function(input, output, session) {
observe({
for(nodeNr in 1:length(jsCode)){
local({
jsToAdd <- jsCode[nodeNr]
shinyjs::onclick(paste0("node", nodeNr), runjs(jsToAdd)) 
})
}
})
output$graphV <- renderGrViz({ 
grViz( "digraph test{
A[tooltip='A word']; 
B[tooltip='Another word'];
A -> B;}" )
})}
shinyApp(ui = ui, server = server)

尝试让工具提示覆盖关系图失败：

library(DiagrammeR)
library(shiny)
library(shinyjs)
texts <- c("Great div for A", "Even better div for B")
jsCode <- paste0("
elem = document.getElementById('node1');
var node = document.createElement('div');
var textnode = document.createTextNode('", texts,"');
node.appendChild(textnode);
node.classList.add('mystyle');
elem.appendChild(node);
")
ui = shinyUI(
fluidPage(
useShinyjs(),
tags$style("
.mystyle {
z-index: 100 !important;
background-color: coral;
font-size: 25px;
}
#node1 {
width: 50px; 
z-index: unset !important;
background-color: blue;
}
"),
grVizOutput('graphV')
)
) 
server = function(input, output, session) {
observe({
for(nodeNr in 1:length(jsCode)){
local({
jsToAdd <- jsCode[nodeNr]
shinyjs::onclick(paste0("node", nodeNr), runjs(jsToAdd)) 
})
}
})
output$graphV <- renderGrViz({ 
grViz( "digraph test{
A[tooltip='A word']; 
B[tooltip='Another word'];
A -> B;}" )
})}
shinyApp(ui = ui, server = server)

在评论中编辑问题：

例如，如果你有一个 40 节点图，有没有办法自动将节点 ID 链接到节点描述(在上面的情况下，"A 的伟大div"(？或者我只需要按照节点在图形可视化代码中列出的顺序对文本文件进行排序？

正确。在 diagrammeR 代码中，它似乎只是向上计数 id："node1， node2， node3,...(。

所以我只是在闪亮中做同样的事情：

for(nodeNr in 1:length(jsCode)){
local({
jsToAdd <- jsCode[nodeNr]
shinyjs::onclick(paste0("node", nodeNr), runjs(jsToAdd)) 
})
}

如您所见，对于节点号paste0("node", nodeNr)将为单击事件分配 javascript 代码jsCode[nodeNr]。jsCode[nodeNr]将包括texts[nodeNr].(请注意，jsCode将根据texts的长度成为字符串的向量。