如何使用 observablehq 绘制具有共享缩放和工具提示的 N 折线图?

How to use observablehq to plot N line charts having shared zooming and tooltip?

提问人:Selva 提问时间:11/4/2023 最后编辑:Selva 更新时间:11/4/2023 访问量:28

问:

我想模仿 Grafana 的功能,因为它在 ObservableHQ 中的局限性。

我模拟了 100 个传感器的时间序列,x 从 0 到 300 秒开始,步长为 1。因此,所有传感器都有共同的 x。如下所示,

x     sen1 sen2 …… sen100
————————————————————
0     10.1 8.3     11.7
1     10.7 8.9     11.2
2     10.5 8.2     11.6
3     11.0 9.2     11.7
……
300   10.8 8.7     11.1

基本上,我想为我的用户提供一个仪表板,其中将有一个带有传感器名称的下拉列表。用户可以选择多个传感器。选择时,仪表板应呈现每个传感器的折线图,每行大约呈现 3 个传感器。

类似于 ObservableHQ 笔记本

我想要共享缩放,这样我就可以缩放一个图表,所有图表都会随之缩放。同样,我想要共享工具提示,所以我将鼠标悬停在一个图表上,我可以看到该 x 处的所有图表值。Observablehq 尚不支持此功能,我是 Observablehq 或 D3.js 的新手。

有人可以帮助在 Observablehq 中实现共享缩放和工具提示吗?

注1:我还希望显示轴,并尽可能多地填充图表水平空间。

注 2:我看到了这个简单的时间序列,但不确定如何修改它以获得共享工具提示和每行 3 个。

JavaScript D3.js 可观察的HQ

评论


答: 暂无答案