はじめに
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を使った実行例（１）
#フォルダ構造の可視化 list <- list.files(full.names = TRUE, recursive = FALSE) jsTree(list) jsTree(list) %>% htmlwidgets::saveWidget(paste0("list_", format(Sys.time(), "%y%m%d"),".html"))
jsTreeを使った実行例（２）
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を使った実行例（３）
#特定のフィールドにチェックを付けて表示 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を使った実行例（４）
#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を使った実行例（１）
#ノードデータ作成（デフォルト） 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を使った実行例（２）
#ノードデータ作成（デフォルト）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
jsTreeRを使った実行例（３） - 別の記述法でノードデータを作成する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")
#theme="proton" jsTreeR::jstree(nodes00, grid = grid, dragAndDrop = TRUE, theme="proton")
参考資料
*1:紛らわしい名前の付け方だよね。。。
