是否可以在闪亮的应用程序(renderGrViz)中选择一个graphviz节点，然后链接到其他信息? [英] Is it possible to select a graphviz node in a shiny app (renderGrViz) and then link to other information?
问题描述
我想在我闪亮的应用程序的中央graphviz节点中添加一个功能(弹出窗口或其他功能?)，当通过鼠标单击选择该功能时，它们会显示信息(例如，center_nodes文件中的info列) .鉴于这些节点具有工具提示属性，我认为/希望计算机必须看到"它们，但我还没有找到一种方法将两者连接并建立这种行为...
I would like to add a feature (a popover, or some other function?) to the central graphviz nodes in my shiny app that, when selected by mouse click, they display information (e.g. the info column in the centre_nodes file). Given that there's a tooltip property to these nodes, I think/hope the computer must 'see' them but I haven't figured out a way to connect the two and establish this behaviour...
我已经探索了多种方法(例如reactR，html标记，hover.css，shinyBS，d3，pipeR，XML，htmltools)，但认为它可以与css或htmlwidgets一起使用，但是我对这段代码有所了解是有限的，我还没有找到解决方案.对于熟悉这种编码的人来说，我感觉很简单....
I've explored a variety of methods (e.g. reactR, html tags, hover.css, shinyBS, d3, pipeR, XML, htmltools) but think it must be possible to do with css or htmlwidgets but my knowledge of this code is limited and I've not figured out a solution yet. I have a feeling its simple for folks familiar with this type of coding....
这是使用DiagrammeR和grViz的示例闪亮应用程序:
This is an example shiny app using DiagrammeR and 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)
希望的结果是，我可以通过单击选择一个节点，然后将显示与该节点相关的信息.通过工具提示功能，我可以在节点上滚动并显示信息，但是对单击的响应将在美学上更具吸引力.甚至能够更改工具提示的外观也将是对当前工具提示的一种改进.
The hopeful result is that I can select a node by clicking on, and then information will be displayed associated with that node. Through the tooltip function I can scroll over a node and information can be displayed but a response to a click would be much more aesthetically appealing. Even being able to change the appearance of the tool tip would be an improvement on what's there currently.
我们非常感谢您的帮助！
Any help is massively appreciated!
推荐答案
此处是有关如何根据所单击的元素添加html元素的草案.也许您可以详细说明要放置它们的位置，或者也可以添加其他有光泽的元素(这样会更容易).
Here is a draft on how to add html elements according to the element being clicked. Maybe you could elaborate a bit more where you want them to be placed or if you are also fine adding other shiny elements instead (would be easier).
下面的代码中的想法是添加一个onclick侦听器.快捷方式是使用shinyjs来实现它.元素的标识符似乎是node1，node2等.
The idea in the code below is to add an onclick listener. Shortcut is to implement it with shinyjs. Identifier of the elements seems to be node1, node2, etc.
然后有多个选项.将该信息返回给"R/Shiny"，并通过Shiny.OnInputChanged(...)添加有光泽的元素，或者通过javascript附加html元素.
使用Shiny.OnInputChanged(...)更容易，因此我尝试是否也可以使用第二个.下面是一个示例.
Then there are multiple options. Giving that information back to "R/Shiny" and add shiny elements via Shiny.OnInputChanged(...) or appending html elements via javascript.
Using Shiny.OnInputChanged(...) is more easy, so i tried if i get the second one to work as well. An example is given below.
在图中添加新的html元素并将其放置在它的前面并不是一件容易的事.可以通过校准css以使其在前面显示(style="z-index: -1")进行实验，但是也许进一步指定最佳解决方案将是一个好方法.
It was not straightforward to add the new html delements within the graph and place them in front of it. One could experiment by calibrating the css to show it in front (style="z-index: -1"), but maybe it would be a good point to further specify the optimal solution.
(出于完整性考虑，当然也可以删除添加的元素，以便一次只显示一个工具提示"，...)
(For sake of completeness, the added elements can of course be removed as well, so that only one "tooltip" is shown at a time,...)
可复制的示例:
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")?还是我只需要按照graphviz代码中列出的节点顺序来排序文本文件?
正确.在图表代码中，似乎只是对ID进行向上计数:"node1，node2，node3，...).
Correct. In the diagrammeR code, it seems to just counts upwards for the ids: "node1, node2, node3,...).
所以我只是在光泽方面做同样的事情:
So i just do the same in shiny:
for(nodeNr in 1:length(jsCode)){
local({
jsToAdd <- jsCode[nodeNr]
shinyjs::onclick(paste0("node", nodeNr), runjs(jsToAdd))
})
}
如您所见，对于节点号paste0("node", nodeNr)，将为click事件分配JavaScript代码jsCode[nodeNr].
并且jsCode[nodeNr]将包括texts[nodeNr]. (请注意，根据texts的长度，jsCode将是字符串的向量.
As you can see for node number paste0("node", nodeNr) the javascript code jsCode[nodeNr] will be assigned for the click event.
And jsCode[nodeNr] will include texts[nodeNr]. (Note that jsCode will be a vector of strings according to the length of texts.
这篇关于是否可以在闪亮的应用程序(renderGrViz)中选择一个graphviz节点，然后链接到其他信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
