使用带有 networkD3 和 Shiny 的外部工具提示 JS 库答案

【问题标题】：Using external tooltip JS library with networkD3 and Shiny使用带有 networkD3 和 Shiny 的外部工具提示 JS 库
【发布时间】：2018-05-22 02:02:12
【问题描述】：

我正在尝试将 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 类的 title 属性并将其转换为更好看的工具提示。我已将标题标签添加到所有节点和链接，将 Tippy 库加载到底层 HTML 页面的 head 标签中，然后在单独的脚本标签中对 .node 类的所有对象调用 Tippy 函数。 Tippy 似乎没有意识到这一点：我继续获得默认浏览器工具提示，而不是 Tippy 工具提示。

【问题讨论】：

您的代码因Error in fn$x$links$value <- "links tooltips" : object 'fn' not found而失败
而 fn$x$links$value 未定义，因为创建 fn 的 forceNetwork 函数中的 input 未定义。 input 对象是来自另一个代码示例的工件，我试图对其进行修改以使我的工作。呜呜呜。谢谢！

标签： javascript r shiny htmlwidgets networkd3

【解决方案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)

【讨论】：