问题标签 [nivo-react]

我的 Y 轴键（或刻度）很长，并且它们被截断但这不是由于图形本身缺乏足够的宽度，使用检查工具，我可以看到为它分配了足够的空间，但是分配给整个图形的框架是不够的......那应该是 ResponsiveBar......

更改 X 轴的“转换”值会使文本完整显示（几乎），但随后图例被截断：

我怎样才能让它们完整显示？在文档中找不到我的答案。

这是一个重现问题的沙箱：https ://codesandbox.io/s/missing-legends-text-pns6v

重要提示：“宽度”不是问题，它以某种方式被一条白线覆盖......另外，我尝试了许多“宽度”尺寸

我指的问题是这样的：

很想听听是否有办法包装文本，或者通过添加悬停效果来截断以显示全文

我正在使用的图表库有一个错误，要解决这个问题，我应该运行这个脚本：https ://github.com/plouc/nivo/blob/master/scripts/patch-react-spring.js 。在构建之前。我曾想过添加“prebuild”：“npm run patch-react-spring.js”并在package.json下的根目录中添加patch-react-spring.js文件。但是，当我执行 npm run patch-react-app 或 npm run prebuild 时，我得到错误：npm ERR！缺少脚本：patch-react-spring.js

这是该项目的 GitHub 存储库：https ://github.com/JonasHendel/SunPosition

我是 Nivo.rocks 的新手，这是一个基于反应的图表库。我试图将一个点击处理程序添加到一个栏，以控制台.记录该栏上的数据。目前，该组件带有自己的“工具提示”，当您将鼠标悬停在栏上时会显示此数据，但我不希望这样。

我已经查看了文档，但它没有清楚地显示如何做到这一点，甚至可能吗？到目前为止，我已经制作了一个按钮，可以从两个栏中注销数据

主要代码与此沙箱相同： https ://codesandbox.io/s/nivo-0xy2m?file=/src/index.js

我的按钮：

似乎最早的数据点总是在图表的左边缘，而最新的数据点在右边缘。是否可以在图表的每一端添加“填充”，或设置自定义 xScale 最小/最大值（最小/最大值对于 yScale 非常有效）。我希望网格超出第一个/最后一个数据点。似乎也没有显示最右边的垂直线和刻度标签。

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

继承人沙箱：https ://codesandbox.io/s/focused-mountain-z7w5d?file=/src/format/index.js

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

我试图在这里使用 Nivo.rocks 的 marikmekko 图表重新创建这个直方图。这是我试图构建的内容：https ://www.kaggle.com/grubenm/austin-weather

现在我只使用 AvgTempF，我想让 x 轴遵循与示例相同的格式，但目前我没有得到：https ://codesandbox.io/s/agitated-allen-1y1u1?file=/ src/chart.js

我试图重新创建这个：

我正在使用 nivo.rocks，这是一个建立在 d3.js 之上的库。我需要构建一个 marimekko 图，如下所示的直方图。我希望它显示温度为 x 华氏温度的天数。

1. 我正在尝试将 x 轴设置为从最低温度到最高温度的 AvgTempF

2. y 轴需要是温度介于两个数字之间的日期数。例如，如果一根柱子是 12F 到 20F，则计数将是它在该范围内的天数（如果有意义的话）

3. 条应具有相同的厚度

像这样的东西：

现在这就是我所拥有的： https ://codesandbox.io/s/agitated-paper-947cz

我正在尝试使用来自 nivo.rocks 的 marimekko 图表制作直方图。我想让 bin 大小的宽度都相等。所以我需要 x 轴以 6 为增量从 30 变为 60。我正在尝试重新创建：

到目前为止，我编写了这段代码来从数据对象中获取 bin 大小：

我想不出我应该在这个道具里放什么

我知道我需要将日期更改为整数以获得 y 轴的计数值，但我不确定这一切的第一步是什么。我真的很感激任何帮助

这是我到目前为止所拥有的沙盒：https ://codesandbox.io/s/gifted-stallman-hpcid

重新措辞：

1. 例如，y 轴需要更改为温度在 30F - 35F 之间的天数。
2. x 轴需要更改，因此所有条的宽度都相同（bin 大小为 6），范围从 30 到 60

我在 Y 轴格式上中继任务以仅显示自然数时遇到问题。在项目中，我使用 React awith Typescript 和 Nivo Rocks 库来创建图表（https://nivo.rocks/）。为了这个问题，我创建了沙箱：

https://codesandbox.io/s/scuqn?file=/src/App.tsx

我找到了设置格式的解决方案：

但它仅适用于纯 js（无类型检查）。使用 TS 时出现类型错误（带有“e:number”）：

我无法将类型与此解决方案匹配，并且我不能使用“任何”类型，我开始相信图书馆创建者并没有在他们的图书馆中预测到这个问题；）如果有人可以帮助我解决这些问题或提出其他解决方案我会很感激的:)

当我单击相应的栏时，我正在尝试创建一个函数，该函数返回温度范围内所有日期的数组

例如，在第一个栏上，只有 2 个温度在 30F 到 35F 范围内的日期。

这是我的代码：https ://codesandbox.io/s/floral-violet-822vg

到目前为止，我得到的只是这段代码，它记录了点击的数据

（添加到图表组件中的 onClick）

这在控制台中给了我这个：

binStart：90 binsize：5 计数：2 结果：19

我试图将所有这 19 个日期作为具有 Date 键和值的所有对象登录到控制台