외부 도구 설명 사용 네트워크 D3 및 반짝이 JS 라이브러리

Question

네트워크 D3 forceNetwork 다이어그램에 노드 및 링크의 값 변수를 툴팁으로 표시하려고합니다. 이렇게하려면, 나는 반짝 이는 htmlwidgets와 외부 JS 라이브러리 Tippy 사용하고 있습니다. 엎어지기 쉬운이 .node 클래스의 title 속성을 가지고 더 좋은 보이는 툴팁으로 변환하도록되어

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) 

: 여기

는 내가 지금까지 가지고있는 것입니다. 모든 노드와 링크에 타이틀 태그를 추가하고 기본 HTML 페이지의 head 태그에 Tippy 라이브러리를로드 한 다음 별도의 스크립트 태그에서 .node 클래스의 모든 객체에 Tippy 함수를 호출했습니다. 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)