如何基于对角线网络D3中的值调整节点大小

问题描述

我不熟悉使用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),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")

我想做的就是以某种方式将value列映射到节点的大小。与美学映射在ggplot2中的工作方式类似。因此，理想情况下，对于每个级别，我希望节点大小与此细分的总值成比例。

例如，lvl1仅具有一个可能的值A，因此该节点应获得所选节点大小的100％。另一方面，lvl2具有3个值，因此对于DI来说，它希望具有整个节点大小的（3 + 2 + 3）/ 13％，C应该具有3/13％的节点大小，而B应该具有2 /节点大小的13％。

这只是一个例子，我可以做任何需要的操作，但是对于这些类型的图表来说，这甚至可能吗？

解决方法

这不是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)