将外部工具提示 JS 库与 networkD3 和 Shiny 一起使用

Question

我正在尝试将 networkD3 forceNetwork 图中节点和链接的值变量显示为工具提示。为此，我将 Shiny 与 htmlwidgets 和外部 JS 库 Tippy 结合使用。

这是我目前的情况：

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 应该采用 .node class 的标题属性并将其转换为 nicer-looking 工具提示。我已经为所有节点和链接添加了标题标签，在底层 HTML 页面的 head 标签中加载了 Tippy 库，然后在 .node [的所有 objects 上调用了 Tippy 函数=19=] 在一个单独的脚本标签中。 Tippy 似乎没有注意到它：我继续获得默认的浏览器工具提示，而不是 Tippy 工具提示。

Answer 1

您的示例代码不起作用的原因有多种（其中一些与添加 Tippy.js 的主题完全无关），但这是您示例的有效修改版本...

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)

将外部工具提示 JS 库与 networkD3 和 Shiny 一起使用

Using external tooltip JS library with networkD3 and Shiny

javascript

r

shiny

networkd3

htmlwidgets