减少 svg 图中条形之间的间隙

Posted 2023-03-06

【中文标题】减少 svg 图中条形之间的间隙

【英文标题】：Reduce gap between bars in svg graphs

【发布时间】：2022-01-17 14:17:24

【问题描述】：

我正在处理堆积条形图。这是代码笔https://codepen.io/a166617/pen/NWvZGLd

codepen 的结果如下所示。如您所见，宽度太长，我想让条形图紧凑并适合 50% 的宽度。基本上，我想减少每个条之间的间隙，以便之后条形图的宽度自动减小。

谁能告诉我如何减少并排的条之间的宽度。我尝试通过更改宽度、x 和 y 属性来减小条形间隙，如下所示，但只能达到 codepen 中所示的最终结果。

<rect
  width=20
  height=height
  fill=bar.color
  x=100 + rowIndex * 60
  y=490 - y - height
/>

【参考方案1】：

只需更改x 的位置。您需要了解自己的变量。

const gutter = 30; // Instead of 60 currently

// ...
<rect
  width=20
  height=height
  fill=bar.color
  x=100 + rowIndex * gutter
  y=490 - y - height
/>

【参考方案2】：

减小rect和text的x轴索引

return (
      <>
      <g key=Math.random()>
        <rect
          width=20
          height=height
          fill=bar.color
          x=100 + rowIndex * 30
          y=490 - y - height
        />
        <text
          x=110 + rowIndex * 30
          y=490 - y - height/2
          dy="0.5em"
          textAnchor="middle"
          style= fill: 'white', fontSize: '12px' 
        >`$bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value`</text>
         <text
            x=105 + rowIndex * 30
            y=480
            textAnchor="end"
            style= fill: 'red',
              fontSize: '13px',
              transformOrigin: (125 + rowIndex * 30)+'px 480px',
              transform: 'rotateZ(-45deg)'
            
          >entry.name</text>
        </g>
      </>
    );