如何更改 Nivo 中的 bin 大小但条宽不变？

如何解决如何更改 Nivo 中的 bin 大小但条宽不变？

所以我找到了这个工作版本，它有一个名为 groupedData 的组件。我只需要解释一下 binSize 是如何改变的，特别是这里的这个函数：

  const groupData = (data,nutrient) => {
  const bins = [...Array(20)].map(() => []);
  for (let i = 0; i < data.length; i++) {
    let binNumber = Math.min(
      19,Math.floor((data[i]?.n100[nutrient] || 0) / 5)
    );
    bins[binNumber].push(data[i]);
  }
  return bins.map((bin,i) => ({ id: (i * 5).toString(),value: bin.length }));
};

export default groupData;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这里是沙箱：https://codesandbox.io/s/focused-mountain-z7w5d?file=/src/format/index.js

数据比较了运动棒的不同营养成分。 n100 是 100 克，nsrv 是每个条形。