2 of 3
added 48 characters in body
Baktaawar
  • 7.1k
  • 24
  • 83
  • 150

Changing the size of arrow boxes of the sunburst visualization

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:

enter image description here

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

Baktaawar
  • 7.1k
  • 24
  • 83
  • 150