京橋のバイオインフォマティシャンの日常

データ分析、コマンドライン、プログラミングについての技術資料・自己アップデート・悩み事などをまとめています。最近、ディープラーニング関連のR言語の資料をまとめるべく注力してます。

R言語で、jsTree・jsTreeR パッケージを使った、 インタラクティブなツリーリスト表示をやってみた件

Rで、インタラクティブに開閉できる、ツリー構造表示をやってみたくて、ちょっと関連パッケージを調べてみた。。

そうすると、jsTreeとjsTreeRというRパッケージがあることが分かった*1

jsTreeもjsTreeRも同じく、バックエンドはjsライブラリのjsTreeを使ってる。

jsTreeの方は、事前のデータ作成が簡単である。ただ、表示レイアウトはイマイチかも。一方、jsTreeRの方は、リスト作成が面倒だけど、細かくアイコンやグリッドなどの設定ができるという印象。

jsTreeを使ったツリーリスト表示

事前準備をする

#jsTreeパッケージのロード
#install.packages("jsTree")
library(jsTree)

#関連パッケージのロード
#install.packages("magrittr")
library(magrittr)
#install.packages("htmlwidgets")
library(htmlwidgets)
#install.packages("htmltools")
library(htmltools)

#データ・ロード
data(states)
data(ToothGrowth)

jsTreeを使った実行例(1)

#フォルダ構造の可視化
list <- list.files(full.names = TRUE, recursive = FALSE)
jsTree(list)

jsTree(list) %>%
  htmlwidgets::saveWidget(paste0("list_", format(Sys.time(), "%y%m%d"),".html"))

jsTreeを使った実行例(2)

head(states)
#  state.region     state.division state.name   variable   value
#1        South East South Central    Alabama Population 3615.00
#2        South East South Central    Alabama     Income 3624.00
#3        South East South Central    Alabama Illiteracy    2.10
#4        South East South Central    Alabama   Life.Exp   69.05
#5        South East South Central    Alabama     Murder   15.10
#6        South East South Central    Alabama    HS.Grad   41.30

#カラムを"/"区切りテキストに変換する
nested_text <- apply(states, 1, paste, collapse='/')
jsTree::jsTree(nested_text)

#htmlにて保存
jsTree::jsTree(nested_text) %>%
  htmlwidgets::saveWidget(paste0("nested_text_", format(Sys.time(), "%y%m%d"),".html"))

jsTreeを使った実行例(3)

#特定のフィールドにチェックを付けて表示
nodestate1 <- states$variable=='Area'
jsTree::jsTree(nested_text, nodestate=nodestate1)

#htmlにて保存
jsTree::jsTree(nested_text, nodestate=nodestate1) %>%
  htmlwidgets::saveWidget(paste0("nested_text_nodestate_", format(Sys.time(), "%y%m%d"),".html"))
jsTreeを使った実行例(4)
#ToothGrowthの場合
head(ToothGrowth)
#   len supp dose
#1  4.2   VC  0.5
#2 11.5   VC  0.5
#3  7.3   VC  0.5
#4  5.8   VC  0.5
#5  6.4   VC  0.5
#6 10.0   VC  0.5

#カラム順を変えて、実行
ToothGrowth_text <- apply(ToothGrowth[,c(2,3,1)], 1, paste, collapse='/')
jsTree::jsTree(ToothGrowth_text)

#htmlにて保存
jsTree::jsTree(ToothGrowth_text) %>%
  htmlwidgets::saveWidget(paste0("ToothGrowth_text_", format(Sys.time(), "%y%m%d"),".html"))

jsTreeRを使ったツリーリスト表示

事前準備をする

#jsTreeRパッケージのロード
#install.packages("jsTreeR")
library(jsTreeR)

#関連パッケージのロード
#install.packages("magrittr")
library(magrittr)
#install.packages("htmlwidgets")
library(htmlwidgets)
#install.packages("htmltools")
library(htmltools)

jsTreeRを使った実行例(1)

#ノードデータ作成(デフォルト)
nodes <- list(
  list( text = "RootA", type = "root",
        children = list(
          list( text = "ChildA1", type = "child" ),
          list( text = "ChildA2", type = "child" ))),
  list( text = "RootB", type = "root",
        children = list(
          list( text = "ChildB1", type = "child" ),
          list( text = "ChildB2", type = "child" ))))

#アイコン設定
types <- list(
  root = list( icon = "glyphicon glyphicon-ok" ),
  child = list( icon = "glyphicon glyphicon-file" ))

jsTreeR::jstree( nodes, types = types, dragAndDrop = TRUE, search=T)

#htmlにて保存
jsTreeR::jstree( nodes, types = types, dragAndDrop = TRUE, search=T) %>%
  htmltools::save_html(paste0("jstreeR_01_", format(Sys.time(), "%y%m%d"),".html"))

jsTreeRを使った実行例(2)

#ノードデータ作成(デフォルト)with 'grid' option
nodes <- list(
  list(text = "Products", 
       state = list( opened = TRUE ),
       type = "A",
       children = list(
         list( text = "Fruit",
               state = list( opened = TRUE ),
               type = "B",
               children = list(
                 list( text = "Apple", data = list( price = 0.1, quantity = 20 )),
                 list( text = "Banana", data = list( price = 0.2, quantity = 31 ), type = "K"),
                 list( text = "Grapes", data = list( price = 1.99, quantity = 34 ), type = "I"),
                 list( text = "Mango", data = list( price = 0.5, quantity = 8 ), type = "J"),
                 list( text = "Melon", data = list( price = 0.8, quantity = 4), type = "f"),
                 list( text = "Pear", data = list( price = 0.1, quantity = 30 ), type = "G"),
                 list( text = "Strawberry", data = list( price = 0.15, quantity = 32 ), type = "H"))),
         list( text = "Vegetables",
               state = list( opened = TRUE ),
               type = "C",
               children = list( 
                 list( text = "Aubergine", data = list( price = 0.5, quantity = 8 ), type = "D"),
                 list( text = "Broccoli", data = list( price = 0.4, quantity = 22 ), type = "D"),
                 list(text = "Carrot", data = list( price = 0.1, quantity = 32 ), type = "D"),
                 list( text = "Cauliflower", data = list( price = 0.45, quantity = 18), type = "E"),
                 list( text = "Potato", data = list( price = 0.2, quantity = 38 ), type = "E"))))
       ))

#グリッド設定
grid <- list(
  columns = list(
    list( width = 200, header = "Name" ),
    list( width = 150, value = "price", header = "Price" ),
    list( width = 150, value = "quantity", header = "Qty" )),
  width = 500)

#アイコン設定
types <- list(
  A = list( icon = "glyphicon glyphicon-ok" ),
  B = list( icon = "glyphicon glyphicon-file" ),
  C = list( icon = "glyphicon glyphicon-leaf" ),
  D = list( icon = "glyphicon glyphicon-flash" ),
  E = list( icon = "glyphicon glyphicon-plus" ),
  f = list( icon = "glyphicon glyphicon-home" ),
  G = list( icon = "glyphicon glyphicon-arrow-right" ),
  H = list( icon = "glyphicon glyphicon-apple" ),
  I = list( icon = "glyphicon glyphicon-star" ),
  J = list( icon = "glyphicon glyphicon-eye-open"),
  K = list( icon = "glyphicon glyphicon-asterisk"))

#リスト可視化
jsTreeR::jstree(nodes, grid = grid, types = types, dragAndDrop = TRUE)

#htmlにて保存
jsTreeR::jstree(nodes, grid = grid, types = types, dragAndDrop = TRUE) %>%
  htmltools::save_html(paste0("jstreeR_02_", format(Sys.time(), "%y%m%d"),".html"))

組込アイコンの参照HP

getbootstrap.com

bootstrap3.cyberlab.info

jsTreeRを使った実行例(3) - 別の記述法でノードデータを作成するTips

後々、プログラムを回してノードデータ作成を行うなら、デフォルトよりも、こう書く方が良い。

#ノードデータ作成
#1段目
nodes00 <- list(list(text = "Products", state = list( opened = TRUE ), children = list()))
#2段目
nodes00[[1]]$children[[1]] <- list(text = "Fruit", state = list( opened = TRUE ), children = list())
nodes00[[1]]$children[[2]] <- list(text = "Vegetables", state = list( opened = TRUE ), children = list())
#3段目: Fruitの下位
nodes00[[1]]$children[[1]]$children[[1]] <- list( text = "Apple", data = list( price = 0.1, quantity = 20 ))
nodes00[[1]]$children[[1]]$children[[2]] <- list( text = "Banana", data = list( price = 0.2, quantity = 31 ))
nodes00[[1]]$children[[1]]$children[[3]] <- list( text = "Grapes", data = list( price = 1.99, quantity = 34 ))
nodes00[[1]]$children[[1]]$children[[4]] <- list( text = "Mango", data = list( price = 0.5, quantity = 8 ))
nodes00[[1]]$children[[1]]$children[[5]] <- list( text = "Melon", data = list( price = 0.8, quantity = 4))
nodes00[[1]]$children[[1]]$children[[6]] <- list( text = "Pear", data = list( price = 0.1, quantity = 30 ))
nodes00[[1]]$children[[1]]$children[[7]] <- list( text = "Strawberry", data = list( price = 0.15, quantity = 32 ))
#3段目: Vegetables
nodes00[[1]]$children[[2]]$children[[1]] <- list( text = "Aubergine", data = list( price = 0.5, quantity = 8 ))
nodes00[[1]]$children[[2]]$children[[2]] <- list( text = "Broccoli", data = list( price = 0.4, quantity = 22 ))
nodes00[[1]]$children[[2]]$children[[3]] <- list(text = "Carrot", data = list( price = 0.1, quantity = 32 ))
nodes00[[1]]$children[[2]]$children[[4]] <- list( text = "Cauliflower", data = list( price = 0.45, quantity = 18))
nodes00[[1]]$children[[2]]$children[[5]] <- list( text = "Potato", data = list( price = 0.2, quantity = 38 ))

#リスト可視化
jsTreeR::jstree(nodes00, grid = grid, dragAndDrop = TRUE)

#htmlにて保存
jsTreeR::jstree(nodes00, grid = grid, dragAndDrop = TRUE) %>%
  htmltools::save_html(paste0("jstreeR_03_", format(Sys.time(), "%y%m%d"),".html"))

補足

テーマの設定

#theme="default-dark"
jsTreeR::jstree(nodes00, grid = grid, dragAndDrop = TRUE, theme="default-dark")
f:id:skume:20210411211716p:plain:w400
#theme="proton"
jsTreeR::jstree(nodes00, grid = grid, dragAndDrop = TRUE, theme="proton")
f:id:skume:20210411211733p:plain:w400

参考資料

www.rdocumentation.org

www.rdocumentation.org

github.com

github.com

mbraak.github.io

*1:紛らわしい名前の付け方だよね。。。