Using External Tooltip JS Library With NetworkD3 And Shiny

I'm trying to display the value variables of nodes and links in a networkD3 forceNetwork diagram as tooltips. To do this, I am using Shiny with htmlwidgets and the external JS libr

Solution 1:

There are multiple reasons why your example code doesn't work (some of which are completely unrelated to the topic of adding Tippy.js), but here's a working, modified version of your example...

library(shiny)
library(htmlwidgets)
library(networkD3)

# Load data
data(MisLinks)
data(MisNodes)

server <- function(input, output) {

    output$net <- renderForceNetwork({
        fn <- forceNetwork(
            Links  = MisLinks, Nodes   = MisNodes,
            Source = "source", Target  = "target",
            Value  = "value",  NodeID  = "name",
            Group  = "group",  opacity = 1)

        # Append value variables to links and nodes in fn network
        fn$x$links$value <- "links tooltips"
        fn$x$nodes$value <- "nodes tooltips"

        onRender(fn, 'function(el, x) {
                        d3.selectAll(".node circle, .link")
                            .attr("title", function(d) { return d.value; });
                        tippy("[title]");
                     }'
        )
    })

    }

ui <- fluidPage(
    tags$head(
        tags$script(src = "https://unpkg.com/tippy.js@2.0.2/dist/tippy.all.min.js")
    ),
    titlePanel("ForceNetD3"),
    mainPanel(forceNetworkOutput("net"))
)

shinyApp(ui = ui, server = server)