CirclepackeR子子组文本换行及层级自定义着色问题求助

问题1：子子组长文本溢出圆外 #

SVG文本元素默认不支持自动换行，单纯通过CSS无法解决该问题。需借助自定义JavaScript代码，将长文本拆分为多行以适配圆的尺寸。

修改后的R代码（含文本换行处理） #

# 创建嵌套数据框存储嵌套数据集信息:
data_Nested <- data.frame(
  root= data$level1.,
  group= data$level2, 
  subgroup= data$level3,
  subsubgroup= data$level4,
  value=88
)

# 加载所需库
library(data.tree)
library(circlepackeR)
library(htmlwidgets)

# 构建路径字符串并转换为Node结构
data_Nested$pathString <- paste("ID", data_Nested$group, data_Nested$subgroup, data_Nested$subsubgroup, sep = "/")
population <- as.Node(data_Nested) 

# 生成圆堆积图
cp <- circlepackeR(population, size = "value", color_min = "hsl(56,80%,80%)", color_max = "hsl(341,30%,40%)", 
                   width=2500, height=2500)

# 添加自定义JS实现文本自动换行
cp <- onRender(cp, '
function(el, x) {
  d3.select(el).selectAll(".label").each(function() {
    const text = d3.select(this);
    const words = text.text().split(/\\s+/);
    let line = [];
    let lineNumber = 0;
    const lineHeight = 1.1;
    const y = text.attr("y");
    const dy = parseFloat(text.attr("dy"));
    let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    
    // 以圆的直径为最大文本宽度，逐词拆分换行
    const radius = parseFloat(text.closest(".node").attr("r"));
    const maxWidth = radius * 2;

    for (const word of words) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > maxWidth) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        lineNumber++;
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
')

# 展示图表
cp

问题2：为所有层级自定义着色 #

默认的color_min和color_max仅基于数值大小生成渐变颜色。要为不同层级设置自定义颜色，可先给data.tree节点添加颜色属性，再通过JavaScript覆盖默认着色逻辑。

修改后的R代码（含层级自定义着色） #

# 创建嵌套数据框存储嵌套数据集信息:
data_Nested <- data.frame(
  root= data$level1.,
  group= data$level2, 
  subgroup= data$level3,
  subsubgroup= data$level4,
  value=88
)

# 加载所需库
library(data.tree)
library(circlepackeR)
library(htmlwidgets)

# 构建路径字符串并转换为Node结构
data_Nested$pathString <- paste("ID", data_Nested$group, data_Nested$subgroup, data_Nested$subsubgroup, sep = "/")
population <- as.Node(data_Nested) 

# 为不同层级节点分配自定义颜色
# 层级0: root节点, 层级1: group节点, 层级2: subgroup节点, 层级3: subsubgroup节点
population$Do(function(node) {
  node$color <- switch(node$level,
                       0 = "#2c3e50",  # root颜色
                       1 = "#3498db",  # group颜色
                       2 = "#e67e22",  # subgroup颜色
                       3 = "#2ecc71"   # subsubgroup颜色
  )
})

# 生成圆堆积图
cp <- circlepackeR(population, size = "value", 
                   width=2500, height=2500)

# 添加自定义JS应用层级颜色
cp <- onRender(cp, '
function(el, x) {
  d3.select(el).selectAll(".node").each(function() {
    const node = d3.select(this);
    const nodeData = node.datum();
    if (nodeData.color) {
      node.style("fill", nodeData.color);
    }
  });
}
')

# 展示图表
cp

说明 #

• 通过Do方法遍历所有节点，为不同层级的节点添加color属性，可根据需求自由修改颜色值。
• 注入的JavaScript代码会读取节点的自定义颜色属性，覆盖默认的渐变着色逻辑。

内容的提问来源于stack exchange，提问作者Sami Khamash