减少 svg 图中条形之间的差距

Question

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

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

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

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

Answer 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}
/>

Answer 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>
      </>
    );

减少 svg 图中条形之间的差距

Reduce gap between bars in svg graphs

html

javascript

css

svg

reactjs