如何根據 networkD3 的 diagonalNetwork 中的值調整節點大小

Question

我是使用networkd3包的新手，我正在嘗試了解如何手動調整布局。 例如，我有以下布局

library(networkD3)
library(tidyverse)
library(data.tree)
library(htmlwidgets)   
    
set.seed(1)
example = data.frame(lvl1 = rep("A", 5), lvl2 = sample(c("D" ,"B", "C"), 5, replace = T), value = sample(c(1,2,3), 5, replace = T))
> example
  lvl1 lvl2 value
1    A    D     3
2    A    C     3
3    A    D     2
4    A    B     2
5    A    D     3


Data_tree <- example %>% 
  unite(col="pathString",lvl1,lvl2,sep="-",remove=FALSE, na.rm = T) %>%
  as.Node(pathDelimiter = "-")


diagonalNetwork(ToListExplicit(Data_tree, unname = TRUE ),
                fontSize = 9,
                linkColour = "#ccc",
                nodeColour = "#fff",
                nodeStroke = "orange",
                textColour = "#000000")

我想做的是以某種方式將值列映射到節點的大小。 與美學映射在ggplot2工作方式ggplot2 。 因此，理想情況下，對於每個級別，我希望節點大小與此細分的總值成正比。

因此，例如 lvl1 只有一個可能的值 A，因此節點應該獲得所選節點大小的 100%。 另一方面，lvl2 有 3 個值，因此對於 DI 而言，它希望它具有完整節點大小的 (3+2+3)/13%，C 應具有節點大小的 3/13%，而 B 應具有 2/節點大小的 13%。

這只是一個例子，我可以做任何需要的操作，但是對於這些類型的圖表，這甚至可能嗎？

Answer 1

這不是diagonalNetwork的預期用途，因此預計會有並發症（例如，當您將鼠標光標懸停在節點上時，默認行為會將節點大小重置為默認大小），但是...

# add a value to the root node
data_list <- ToListExplicit(Data_tree, unname = TRUE)
data_list$value <- 5

# save the output of diagonalNetwork as an object
d3net <- diagonalNetwork(data_list,
                         fontSize = 9,
                         linkColour = "#ccc",
                         nodeColour = "#fff",
                         nodeStroke = "orange",
                         textColour = "#000000")

# write some JavaScript to set the circles' radii to the data's value
node_size_js <-
  '
    function(el) { 
      d3.select(el)
        .selectAll(".node")
        .selectAll("circle")
        .attr("r", d => d.data.value * 5);
    }
  '

# use onRender to run the JS when it loads
htmlwidgets::onRender(d3net, node_size_js)