javascript - 如何根据networkD3的对角网络中的值调整节点大小
问题描述
我是使用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 个值,所以对于 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)
推荐阅读
- c++ - 如何通过按键正确地从地图中删除项目?
- php - 如何结合 laravel 和 vue 路由
- java - 如何从 JPA 中的两个表中获取数据
- ionic-framework - 导入 FileTransfer 时的问题 - ionic 3
- python - 具有功能的列表中的Python For循环
- javascript - 如何在 const 中存储数组
- python - 为什么我的 Python 代码在从另一个文件调用时会添加一个随机单引号?
- android - 成功验证后从具有特定节点的 Firebase 数据库获取数据
- google-kubernetes-engine - GKE 主节点
- html - 粗体字体在 iOS 上太粗了