更改朝阳图表的箭头框的大小 [英] Changing the size of arrow boxes of the sunburst visualization

问题描述

我正在使用Kerry Rodden的fork open source d3和html脚本进行森伯斯特可视化.

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.

我不是来自html/css背景，所以无法弄清楚需要更改代码中的哪个元素才能获得正确的对齐方式.

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.

这是当前的外观:

如果您看到左上方的文本与框重叠.我想拉长框或减小文本字体大小.

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?

这是此代码的css文件.

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

我认为这些对齐问题可能会在此CSS参数中得到解决.但是在玩了很少的游戏之后，还没有看到Soln.

I think these alignment issues might be fixed in this css parameters. But after playing with few don't see the soln yet.

谢谢

缺少中间文本句子，即使路径更多，矩形也只能缩减为4个.

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

推荐答案

在此版本的朝阳下，

您可以在此处(在sunburst.js中)增加矩形的宽度:

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
    },

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

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

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

在 Kerry Roddan 的原始森伯斯特可视化中，您可以增加矩形的宽度在这里:

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

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

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

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

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

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

这篇关于更改朝阳图表的箭头框的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！