Adjusting sankey plot in tabbed section

前端 未结 2 719
鱼传尺愫
鱼传尺愫 2021-02-14 02:39

In the r-markdown document given below, I use tabbed sections to display sankey plots.

However, when a sankey plot is in a tab other than the first, adjusting (using

2条回答
  •  南旧
    南旧 (楼主)
    2021-02-14 03:32

    If you add the following code to the end of your example, the appropriate text-anchors will be set whenever a tab is clicked/activated, which should solve your specific problem...

    ```{js}
    setTimeout(function () {
        $('.nav-tabs a').on('shown.bs.tab', function() { 
            d3.selectAll(".node text").attr("text-anchor", "begin").attr("x", 20);
          })
      }, 1)
    ```
    

    You could also then remove all of your calls to onRender further up since they're no longer needed.

    Here's a full example with a bit of reformatting to make it more concise...

    ---
    title: "Untitled"
    output: html_document
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = FALSE)
    
    library(networkD3)
    library(htmlwidgets)
    
    name <- c('Node0', 'Node1', 'Node2', 'Node3', 'Node4', 'Node5', 'Node6', 
              'Node7', 'Node8', 'Node9', 'Node10', 'Node11', 'Node12', 'Node13',
              'Node14', 'Node15', 'Node16', 'Node17', 'Node18', 'Node19', 'Node20',
              'Node21', 'Node22', 'Node23', 'Node24', 'Node25', 'Node26', 'Node27',
              'Node28', 'Node29', 'Node30', 'Node31', 'Node32', 'Node33')
    nodes <- data.frame(name)
    
    source <- c(0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5,
                5, 5, 6, 6, 6, 6, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 
                11, 11, 11, 11, 12, 12, 12, 12, 12, 13, 13, 13, 13, 13, 14, 14, 14, 
                14, 14, 15, 15, 15, 16, 16, 16, 17, 17, 17, 18, 18, 18, 19, 19, 20, 
                20, 21, 22, 22, 22, 22, 23, 23)
    target <- c(3, 4, 5, 6, 3, 4, 5, 6, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
                16, 17, 18, 19, 20, 21, 22, 23, 24, 33, 31, 24, 33, 26, 27, 24, 33, 
                29, 30, 24, 33, 29, 30, 24, 33, 29, 30, 24, 33, 26, 27, 28, 24, 33, 
                26, 27, 28, 24, 33, 26, 27, 28, 24, 33, 31, 24, 33, 32, 24, 33, 32, 
                24, 33, 25, 24, 33, 24, 33, 33, 24, 33, 29, 30, 24, 33)
    value <- c(140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 130, 130,
               50, 50, 50, 140, 100, 100, 80, 150, 150, 60, 60, 180, 80, 80, 80, 13,
               13, 104, 13, 13, 52, 52, 10, 10, 30, 30, 10, 10, 30, 30, 10, 10, 30,
               30, 16, 16, 36, 36, 36, 10, 10, 30, 30, 30, 10, 10, 30, 30, 30, 10, 
               10, 60, 30, 30, 90, 30, 30, 90, 10, 10, 40, 30, 30, 90, 90, 80, 10, 
               10, 30, 30, 40, 40)
    links <- data.frame(source, target, value)
    ```
    
    ## Sankey diagrams {.tabset .tabset-fade}
    
    ### Outturn
    
    ```{r }
    sn <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
                        Target = "target", Value = "value", NodeID = "name", 
                        fontSize = 15, nodeWidth = 20, margin = list(left = 100),
                        colourScale = JS("d3.scaleOrdinal(d3.schemeCategory20b);"))
    
    onRender(sn, jsCode = 
      'function(el, x) { 
          d3.selectAll(".node text").attr("text-anchor", "begin").attr("x", 20);
      }')
    ```
    
    ### Actual
    
    ```{r }
    sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
                  Target = "target", Value = "value", NodeID = "name", 
                  fontSize = 15, nodeWidth = 20, margin = list(left = 100),
                  colourScale = JS("d3.scaleOrdinal(d3.schemeCategory20b);"))
    ```
    
    ```{js}
    setTimeout(function () {
        $('.nav-tabs a').on('shown.bs.tab', function() { 
            d3.selectAll(".node text").attr("text-anchor", "begin").attr("x", 20);
          })
      }, 10)
    ```
    

提交回复
热议问题