如何根据 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)