更改朝阳可视化的箭头框的大小

Question

我正在使用Kerry Rodden的fork open source 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参数中得到解决。但是在玩了很少的游戏之后，还没有看到Soln。

谢谢

编辑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部分：

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

在Kerry Roddan中原始的旭日形可视化中，您可以在此处增加矩形的宽度：

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

要减小字体大小，请添加以下css部分：

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

增加多边形的宽度并减小字体大小：https://bl.ocks.org/ee2dev/4153ee8eafb5a27d32588b12877a0ea7