将外部工具提示JS库与networkD3和Shiny结合使用

问题描述

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

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/[email protected]/dist/tippy.all.min.js")),
  tags$script(tippyJS),
  titlePanel("ForceNetD3"),

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

shinyApp(ui = ui, server = server)

Tippy应该具有.node类的title属性，并将其转换为外观更好的工具提示.我已经为所有节点和链接添加了标题标签，在基础HTML页面的head标签中加载了Tippy库，然后在单独的脚本标签中对.node类的所有对象调用了Tippy函数. Tippy似乎并没有接受:我继续获得默认的浏览器工具提示，而不是Tippy工具提示.

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.

推荐答案

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

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/[email protected]/dist/tippy.all.min.js")
    ),
    titlePanel("ForceNetD3"),
    mainPanel(forceNetworkOutput("net"))
)

shinyApp(ui = ui, server = server)

这篇关于将外部工具提示JS库与networkD3和Shiny结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！