Как искать в сетевом графике, созданном с использованием библиотеки d3 js, из блестящего приложения - PullRequest
Новая
       50

Как искать в сетевом графике, созданном с использованием библиотеки d3 js, из блестящего приложения

0 голосов
/ 13 марта 2020

Я пишу блестящее приложение R, которое может искать в сетевых графиках, созданных с использованием библиотеки d3 js. В качестве примера я выбрал networkD3 :: forceNetwork и создал следующее приложение. В приложении я использовал блестящий js для отправки строки (для поиска) в функции js. Я попытался написать js функцию для осуществления поиска, посмотрев на код в jsfiddle .

Я посмотрел в Поле поиска в сетевом графике , но Подсказки, если они есть, не работают с моей настройкой, т.е. R (3.6.3), htmltools (0.4.0), networkD3 (0.4.9000). Приложение не отображает ошибок и не реализует желаемые функции поиска. Буду признателен за любые предложения, чтобы исправить эту ошибку. 

library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
library(dplyr)
library(shinyjs)
library(V8)
library(networkD3)

## custom js function ##
FindNodeJS <- 
  'shinyjs.find_node = function(param) {
    var defaultParam = {
        search_element: ""
    };
    param = shinyjs.getParams(param, defaultParam);
    var node = svg.selectAll(".node");

    if (param.search_element === "") {
        node.style("stroke", "white").style("stroke-width", "1");
    } else {
        var selected = node.filter(function(d, i) {
            return d.name != selectedVal;
        });
        selected.style("opacity", "0");
        var link = svg.selectAll(".link")
        link.style("opacity", "0");
        d3.selectAll(".node, .link").transition()
            .duration(5000)
            .style("opacity", 1);
    }
}'
node_names <- MisNodes$name
### Server ####
server <- function(input, output) {
  p <- eventReactive(input$plot_network,
                     {
                       fn <- forceNetwork(
                         Links  = MisLinks,
                         Nodes   = MisNodes,
                         Source = "source",
                         Target  = "target",
                         Value  = "value",
                         NodeID  = "name",
                         Group  = "group",
                         opacity = 1
                       )

                       fn <- htmlwidgets::onRender(fn, customJS)
                     })

  output$force <- renderForceNetwork({
    p()
  })

  observeEvent(input$find, {
    param <- input$search
    js$find_node(param)
  })
}


#### UI ####
ui <- dashboardPage(
  skin = "purple",
  ###Header
  dashboardHeader(title = div(
    HTML("<em>Search D3 plot in shiny</em>")
  ),
  titleWidth = 250),

  ###Sidebar
  dashboardSidebar(
    width = "300px",
    # Display plot
    shinyWidgets::actionBttn(
      inputId = "plot_network",
      label = "show plot",
      color = "default",
      style = "gradient",
      block = FALSE
    ),
    verbatimTextOutput(outputId = "searched_text")
  ),

  ###Body
  dashboardBody(
    shinyjs::useShinyjs(),
    extendShinyjs(text = FindNodeJS),
    fluidRow(
      tabItem(tabName = "Force directed layout", forceNetworkOutput("force", 
                                                                    height = 600)),
      br(),
      dqshiny::autocomplete_input(
        id = 'search',
        label = 'Enter text',
        placeholder = 'text',
        options = node_names,
        width = '210px'
      ),
      shinyWidgets::actionBttn(
        inputId = "find",
        label = "Search",
        color = "primary",
        style = "simple",
        block = FALSE,
        size = "xs"
      )
    )
  )
)

#### Run ####
shinyApp(ui = ui, server = server)
...