用于可视化、操作和导出数据点的 JavaScript？

Question

我一直在使用 Tkinter 和 Pygame 作为 GUI 来可视化数据点。使用 Tkinter，从列表中选择文件，然后打开 Pygame 窗口，其中绘制数据点。Pygame 不适用于数据可视化，我想使用替代方案。

我想使用 JavaScript 来可视化数据，但我不知道如何将文件中的大量点数据放入浏览器窗口，然后让用户能够操作数据(移动、添加或删除点)，然后将该数据保存回来。

我需要什么工具才能将数据导入 JavaScript，生成用于绘图的图形和一些其他基本形状(文本、线条、点)，然后将数据导出？

Answer 1

plotly.js是一个很棒的 JS 库，可让您轻松地可视化 Web 上的任何数据。您可以查看链接并在 Internet 上搜索一些教程，例如这个，但我认为这不是问题所在。

问题在于从文件中获取数据。

谈到网络时，您将需要某种可以提供和接收文件的网络服务器。

Web 浏览器允许用户输入文件(这可以通过 html 标签 input 完成)，然后它向您的 Web 服务器发送一个包含文件数据的请求(这是您的 JS代码是)，然后您可以在其中对数据执行任何您喜欢的操作，并发回响应以供浏览器显示。

虽然 Web 服务器可能很容易上手，您可以使用许多不同的语言(包括 JavaScript)来完成它，但我假设您目前还没有兴趣构建 Web 服务器。

如果您坚持使用 JavaScript 构建它，您将不得不寻找另一种方法来获取您想要绘制的数据，或者实际构建某种服务器来处理您希望用户输入的这些文件。如果这真的适合你，这里有 starting tutorial用于使用 Node.js (JavaScript) 构建 Web 服务器，这里是 another one用于使用 django (Python) 构建 Web 服务器

但如果你不喜欢这个想法并且不介意回到 Python，你可以使用 matplotlib。

Python 有一个名为 matplotlib 的第三方模块。 ，这使您可以非常轻松地绘制点并使用许多不同的自定义项绘制它们。

因此，在从文件中提取点后，您可以删除之前使用的任何 Pygame 代码，而只需执行以下操作:

import matplotlib.pyplot as plt

...  # extracting your points from the files

plt.plot(xpoints, ypoints)
plt.show()

xpoints 和 ypoints 是文件中的点

这将创建一个折线图。您可以通过将可选的第三个参数传递给 plot 函数来自定义此图，例如:

plt.plot(xpoints, ypoints, "x")

这只会绘制点而不是画线。您还可以将“x”更改为“ro”、“bo”、“r+”等等。

你可以引用上面的链接看一下matplotlib的文档，然后选择你是想尝试一下还是真的还是坚持使用JS。但是 IMO 我认为在这种情况下您将不得不找到另一种方法来获取数据，因为构建 Web 服务器需要时间和理解，并且一开始可能会非常困惑:)