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

【问题标题】：Reduce gap between bars in svg graphs减少 svg 图中条形之间的间隙
【发布时间】：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}
/>

【问题讨论】：

标签： javascript html css reactjs svg

【解决方案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>
      </>
    );

【讨论】：