如何使用shinyjs将graphviz节点数据链接到Shiny UI htmlOutput?

问题描述

我希望能够在我的graphviz图中选择一个节点(带有工具提示)，并在闪亮的UI中输出与该节点关联的文本信息(例如htmlOutput/renderUI).

I'd like to be able to select a node (with tooltip) in my graphviz diagram, and have the text information associated with that node be output in the shiny UI (e.g. htmlOutput/renderUI).

此问题是另一个问题的后续内容().尽管前面的问题部分成功(例如，我现在可以选择一个节点，然后在graphviz图的底部生成了相关信息)，但由于输出未出现在图表的一部分中，因此它没有用处.闪亮的应用程序.作为该问题的一部分，提到功能Shiny.OnInputChanged(...)(或Shiny.setInputValue)是产生相似结果(通过javascript附加html元素)的更便捷方法，我想知道这是否会导致以下结果与闪亮框架更兼容，因此可以用作闪亮小部件输出的输入?不幸的是，我无法找到描述类似问题的任何网站(例如必须首先从graphviz节点提取数据，然后将该输入连接到闪亮的输出).因此，我整理了一个希望成功地使用Shinyjs重新创建的基于javascript的代码的示例，并添加了htmlOutput('info')，在该输出中将显示文本"数据，并选择相应的节点

This question follows on from another question (Is it possible to select a graphviz node in a shiny app (renderGrViz) and then link to other information?). Although the previous question was partly successful (e.g. I'm now able to select a node and relevant information is then produced at the bottom of the graphviz figure), it doesn't serve purposes as the output doesn't appear a part of the shiny app. As part of that question, the function Shiny.OnInputChanged(...) (or Shiny.setInputValue) was mentioned as a more convenient way to produce a similar outcome (to appending html elements via javascript) and I'm wondering if this will lead to an outcome that is more compatible with the shiny framework, and therefore could serve as an input to a shiny widget output?Unfortunately, I haven't been able to find any websites that describe a similar problem (e.g. that have to first pull data from graphviz nodes, and then connect this input to a shiny output). As such, i've pulled together an example of the successful javascript based code that I hope to recreate with shinyjs, with the addition of an htmlOutput ('info') which is where the 'texts' data will appear the appropriate node is selected.

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(),
    sidebarLayout(
      sidebarPanel(htmlOutput('info')),
      mainPanel(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)

推荐答案

您可以将shinyjs与onclick，Oninputchanged和renderUI一起使用.

You could use shinyjs with onclick, Oninputchanged and renderUI for that.

添加onclick事件:

Add an onclick event:

 shinyjs::onclick(paste0("node", nodeNr), runjs(jsToAdd))

使用javascript在该clickevent中产生闪亮的输入:

Producing a shiny input inside that clickevent with javascript:

jsCode <- paste0("Shiny.onInputChange('clickedElemNr',", 1:2,")")

(在此处查看详细信息: https://shiny.rstudio.com/article/js-send-message.html )，..

(see details here: https://shiny.rstudio.com/articles/js-send-message.html),..

并渲染ui元素:

observeEvent(eventExpr = input$clickedElemNr,{
        output$tooltip <- renderUI({
          textInput(inputId = "x", label = "x", value = texts[input$clickedElemNr])
        })
      })

可复制的示例:

library(DiagrammeR)
library(shiny)
library(shinyjs)

texts <- c("Great div for A", "Even better div for B")

jsCode <- paste0("Shiny.onInputChange('clickedElemNr',", 1:2,")")

ui = shinyUI(
  fluidPage(
    useShinyjs(),
    sidebarLayout(
      sidebarPanel(htmlOutput('info'), uiOutput("tooltip")),
      mainPanel(grVizOutput('graphV'))
    ))
)

server = function(input, output, session) {

  observeEvent(eventExpr = input$clickedElemNr,{
    output$tooltip <- renderUI({
      textInput(inputId = "x", label = "x", value = texts[input$clickedElemNr])
    })
  })

  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)

这篇关于如何使用shinyjs将graphviz节点数据链接到Shiny UI htmlOutput?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！