I am using Kerry Rodden's fork open source d3 and html script for sunburst visualization.
https://github.com/mojoaxel/d3-sunburst
It works on my data but I have longer labels so it is overlapping in the legend arrows on top left.
I am not coming from html/css background so not able to figure out which element in the code needs to be changed to get the right alignment.
This is how it looks currently:
If you see top left has text overlapping the boxes. I want to elongate the box or reduce the text font size.
Also possible to increase the size of main sunburst chart on browser? Like possible to make it bigger?
Here is the css file for this code.
#sunburst-breadcrumbs {
width: 600px;
height: 70px;
}
#sunburst-legend {
padding: 10px 0 0 3px;
}
#sunburst-breadcrumbs text,
#sunburst-legend text {
font-weight: 600;
fill: #fff;
}
#sunburst-chart {
left: 50%;
position: absolute;
margin-left: -375px;
}
#sunburst-chart path {
stroke: #fff;
}
#sunburst-description {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
text-align: center;
font-size: 2.5em;
margin-left: -100px;
margin-top: -1.25em;
line-height: 2.5em;
}
I think these alignment issues might be fixed in this css parameters. But after playing with few don't see the soln yet.
Thanks