问题标签 [react-vis]

我正在从头开始构建一个离散的条形图组件，以显示一天中每个小时的航班到达/离开。我需要将一些数据（航班和时间）基本上匹配到特定的 div 并将其呈现在 div 中。例如在 image 中，我需要获取飞机列表，确定它是否用于 Arrivals/destinations 并将其与 x 轴时间范围匹配并在适当的 div 内呈现。我可以有唯一的 div id 查看示例

如何在适当的 div 中呈现飞机时间数据（基本上将 div 键与飞机数据中的时间匹配。）

有许多帖子解决了这个问题的一些变体——其中最流行的建议是重新设计父子层次结构，以符合具有单向数据流的反应原则。我目前正在使用一个简单的应用程序，该应用程序旨在使用 react-vis 制作一些 webplots，这是一个不再维护的相对较大的绘图包。

我的问题是图例组件和绘图组件是分开的，理想情况下，人们想访问绘图组件内的一些变量来设置图例的基本参数。我已经根据 react-vis 文档中的一个示例找到了一个简单的组件。对于此示例，我想访问HexbinSeries中的一个变量，然后通过控制台将其登录到主应用程序中。

该图应该是一个六边形直方图，其中一个六边形的计数为 3，而其他六边形的计数为 1（来自数据）。实际的 HexbinSeries 组件使用 d3-hexbin 来构造绘图的路径，并且可以很容易地从这个构造中推导出每个六边形的总计数。

天真的解决方案是在主应用程序上重现此过程（在我的数据集上运行 d3-hexbin），并从那里确定计数。但理想情况下，我希望避免每次渲染都在大型数据集上重新运行 d3-hexbin 两次，特别是如果该图是交互式的并且我们需要使用计数更新图例。

第二个天真的解决方案是拥有一个全局变量或一些 DOM 元素，我将在 HexbinSeries.js 中手动访问以进行更改。但这显然是一种一次性解决方案。

编辑：

另一种方法是让父级将 setState 作为道具传递给 HexbinSeries。但是，HexbinSeries的编写方式超出了我的理解，目前它似乎没有构造函数。

我想在径向图表的不同部分显示我自己选择的颜色，这就是通过将 colorType 道具传递给 RadialChart 组件来实现的方法。

这是我的代码::

我正在使用 React Vis 创建一个简单的图表。这是我的代码：

我收到此错误消息： Received NaN for the `x` attribute. If this is expected, cast the value to a string."

当我将 myData 中的 x 值更改为整数时，它可以工作，但我需要它们作为字符串。该文档明确指出这应该有效：

我正在尝试使用 Vis.js，React并从 James Tharpe 共享的模式开始：https ://www.jamestharpe.com/react-visjs/ 。

我还试图包括我所谓的 BoltOns，它以网络状态作为参数，允许他们根据需要操纵事件处理程序。

不幸的是，这些 BoltOns 似乎没有以我期望的方式响应状态更新，因此我无法正确设置事件处理程序。我的问题在下面的评论中注明。一般来说，BoltOns 所作用的对象似乎是落后的一个更新。似乎它应该能够以这种方式工作，就好像我触发我的开发服务器重新编译行为一样。

谁能建议一种替代模式，或者网络库？（我已经做了两个动作。）

我正在使用来自 React-Vis 的提示，但即使我将提示传递给它应该再次绘制的值，它也超出了范围。如何确保它位于垂直条高度之上？

代码链接在这里。

或此处的完整代码：