时间戳

首页 > 解决方案 > 如何更改 Nivo 中的 bin 大小但保持条形宽度不变？

javascript - 如何更改 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 是每条。

标签： javascriptreactjsd3.jsdata-visualizationnivo-react

解决方案

推荐阅读