CirclepackeR text wrapping inside the subsubgroups & customized coloring for all the levels in the Hierarchy Issue

[sami.khamash]

Hi,
I am working on an Interactive hierarchical graph (packing circles) but I am sort of stuck and I really appreciate your support. I was able to transform the data I have into an acceptable form by the circlepackeR package. However, the subsubgroub level is taken from a column that has a long text in all its row and no matter how I make the packing circle bigger still the text going outside the subsubgroup circles, I'm trying to take the text wrapping issue through CSS but with no luck, until now as I am not familiar with CSS. Furthermore, I also tried to find a way to customize the colors of all the levels in the hierarchy, still did not make yet. Here you go my code:

R code:

# create a nested data frame giving the info of a nested dataset:
data_Nested <- data.frame(
  root= data$level1.,
  group= data$level2, 
  subgroup= data$level3,
  subsubgroup= data$level4,
  value=88
)

# Change the format. This use the data.tree library. This library needs a column that looks like root/group/subgroup/..., so I build it

library(data.tree)
data_Nested $pathString <- paste("ID", data_Nested$group, data_Nested$subgroup, data_Nested$subsubgroup, sep = "/")

population <- as.Node(data_Nested) 
 


# creating the hierarchical packing circle:

circlepackeR(population , size = "value", color_min = "hsl(56,80%,80%)", color_max = "hsl(341,30%,40%)", 
             width=2500, height=2500)

My try on CSS code:

<style type=”text/css”>.circlepackeR .node {
cursor: pointer;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: break-all;
line-break: anywhere;
}

.circlepackeR .node:hover {
stroke: #000;
stroke-width: 2px;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: break-all;
line-break: anywhere;
}
.circlepackeR .node — leaf {
fill: red;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: break-all;
line-break: anywhere;

}

.circlepackeR .label {
overflow-wrap: break-word;
font: 15px “Helvetica Neue”, Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
    word-break: break-all;
    line-break: anywhere;
}

.circlepackeR .label,
.circlepackeR .node — root,
.circlepackeR .node — leaf {
pointer-events: none;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: break-all;
line-break: anywhere;

}

.circlepackeR .subsubgroup {
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
    word-break: break-all;
    line-break: anywhere;
} 

.ow-anywhere {
  overflow-wrap: anywhere;
  overflow-wrap: break-word;
  
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

Sorry I am not familiar with CSS, but I tried to include overflow-wrap: break-word; in all the sections incase it worked by any chance.