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 library Tippy.

Here is what I have so far:

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

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

tippyJS <- 'tippy(".node")'

server <- function(input, output) {

  # Load data
  data(MisLinks)
  data(MisNodes) 

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

  output$net <- renderForceNetwork(onRender(fn,     
  '
  function(el, x) {
  d3.selectAll(".node, .link").append("svg:title")
  .text(function(d) { return d.value; });
  }
  '
  )
)

}

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

    mainPanel(
      forceNetworkOutput(outputId = "net")
    )
  )

shinyApp(ui = ui, server = server)

Tippy is supposed to take the title attribute of the .node class and convert it to a nicer-looking tooltip. I've added title tags to all of my nodes and links, loaded the Tippy library in the head tag of the underlying HTML page, and then called the Tippy function on all objects of the .node class in a separate script tag. Tippy doesn't seem to pick up on it: I continue to get default browser tooltips instead of Tippy tooltips.

回答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)

来源：https://stackoverflow.com/questions/47703946/using-external-tooltip-js-library-with-networkd3-and-shiny

标签

javascript

Shiny

htmlwidgets

networkd3