CODEWITHSUNDEEP
htmlcssd3.js
Baktaawar
Baktaawar

Reputation: 7490

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

Edit 2:

The middle text sentence is missing and the rectangles curtail to only 4 even when the path is more.

enter image description here

Upvotes: 2

Views: 494

Answers (1)

ee2Dev
ee2Dev

Reputation: 1998

In this version of a sunburst,

you can increase the width of the rectangle here (in sunburst.js):

    // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
    breadcrumbs: {
        w: 75,
        h: 30,
        s: 3,
        t: 10
    },

To decrease font-size, add the following css section:

  ...
  #sunburst-breadcrumbs text{
    font-size: 3px;
  }

In the original sunburst visualization from Kerry Roddan, you can increase the width of the rectangle here:

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
  w: 175, h: 30, s: 3, t: 10
};

To decrease font-size, add the following css section:

<style>
  #sequence text{
    font-size: 10px;
  }
</style>

Increasing width of polygon and decreasing font-size: https://bl.ocks.org/ee2dev/4153ee8eafb5a27d32588b12877a0ea7

Upvotes: 1

Related Questions