networkD3 question: how to get the node that is clicked in the network

[jianshu Weng]

hi all, 

   I've plot a simpleNetwork with networkD3 package in Shiny. 

   

   When we click on a node, the colour of the node will change. Wonder whether there is a way to get the ID/name of the node that is clicked within shiny, so that the node ID/name can be sent back to server (something like shiny::onInputChange)?  

Thanks

[adrie...@hotmail.com]

Hello,
Can you give me a snippet of code please ?
Thank you.

Adrien

[jianshu Weng]

Thanks, Adrien. 

Please find below some code snippet. Currently, there is no code to capture the node clicking yet. Wonder whether there is a way to do that. 

Thanks, 

JS 

##server.R###

output$anomaly_network <- renderForceNetwork({

  if (input$run == 0)

    return()

  

  isolate({   

    results<-getAnomaly()  # getAnomaly is a reactive function created to the number crunching. 

    

    gg_t<-get.data.frame(results[[2]])

      

    simpleNetwork(gg_t,charge=120,fontSize=20,height=400,linkDistance=100)

  })

  

})

### ui.R ###

body<-dashboardBody(

fluidRow(

        tabBox(

          title="anomaly",width=12,side="right",

          

          tabPanel("Graph View",

                   simpleNetworkOutput("anomaly_network")

          )

        )

      )

)

[adrie...@hotmail.com]

When I click on the Graph View button, nothing happens.

Here is the code :

# server.R

library(shiny)
library(ggplot2)

function(input, output) {
 
  output$anomaly_network <- renderForceNetwork({
    if (is.null(input$run)){}
    else{

   
    isolate({  
      results<-getAnomaly()  # getAnomaly is a reactive function created to the number crunching.
     
      gg_t<-get.data.frame(results[[2]])
     
      simpleNetwork(gg_t,charge=120,fontSize=20,height=400,linkDistance=100)
    })
    }
  })
}

# ui.R
library(shiny)
library(shinydashboard)
library(networkD3)

[jianshu Weng]

OK. Manage to hack it. 

I add one more line in the click() function in simpleNetwork.js to send Shiny.onInputChange back to Shiny. The click() is now something like this:

    // click event handler

    function click(d) {

      d3.select(this).select("text").transition()

        .duration(750)

        .attr("x", 22)

        .style("stroke-width", ".5px")

        .style("opacity", 1)

        .style("fill", x.options.nodeClickColour)

        .style("font", x.options.clickTextSize + "px serif");

      d3.select(this).select("circle").transition()

        .duration(750)

        .style("fill", x.options.nodeClickColour)

        .attr("r", 16);

 Shiny.onInputChange(el.id+"_clickednode", d.name); ## added line to send onInputChange back to Shiny. 

    }

Let me know if there is a more elegant way. :)

Cheers, 

JS

[Shirbi]

Hi there,

I'm trying to use your hack and it doesn't seem to be working. Could you include where/how you implemented the js into the code?

Thanks!