如何根据 networkD3 的对角线网络中的值调整节点大小

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 中的工作方式。因此，理想情况下，对于每个级别，我希望节点大小与此细分的总值成正比。

因此，例如 lvl1 只有一个可能的值 A，因此节点应获得所选节点大小的 100%。另一方面，lvl2 有 3 个值，所以对于 D，我希望它有 (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)

如何根据 networkD3 的对角线网络中的值调整节点大小

How to adjust node size based on value in diagonalNetwork of networkD3

javascript

r

d3.js

htmlwidgets

networkd3