Изменение размера полей со стрелками визуализации солнечных лучей

Question

Я использую вилку Керри Роддена с открытым исходным кодом d3 и html-скрипт для визуализации солнечных лучей.

https://github.com/mojoaxel/d3-sunburst

Это работает с моими данными, но у меня есть более длинные метки, поэтому они перекрываются стрелками легенды в левом верхнем углу.

Я не из фонового html / css, поэтому не могу понять, какой элемент в коде необходимо изменить, чтобы получить правильное выравнивание.

Вот как это выглядит в данный момент:

Если вы видите, что в верхнем левом углу есть текст, перекрывающий поля.Я хочу удлинить поле или уменьшить размер шрифта текста.

Также возможно ли увеличить размер основной диаграммы солнечных лучей в браузере?Как можно сделать его больше?

Вот файл CSS для этого кода.

#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;
}

Я думаю, что эти проблемы выравнивания могут быть исправлены в параметрах этого CSS.Но после игры с немногими пока не вижу солнечн.

Спасибо

Редактировать 2:

Среднее текстовое предложение отсутствует, а прямоугольники сокращаются до 4, даже если путь больше.

Answer 1

В этой версии солнечных лучей

вы можете увеличить ширину прямоугольника здесь (в sunburst.js):

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

Чтобы уменьшить размер шрифта, добавьте следующееcss section:

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

В исходной визуализации солнечных лучей из Керри Роддан вы можете увеличить ширину прямоугольника здесь:

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

Чтобы уменьшить шрифтsize, добавьте следующий раздел css:

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

Увеличение ширины многоугольника и уменьшение размера шрифта: https://bl.ocks.org/ee2dev/4153ee8eafb5a27d32588b12877a0ea7