javascript - 在 d3/Canvas JS 中操作数据的最佳方式？

Question

我正在可视化仪表板工作，我遇到了一些问题

我很困惑在 d3js 和 canvasjs 中选择什么。虽然 d3js 在良好的视觉效果方面具有丰富的功能，但我更喜欢 canvas，因为它很容易创建图表，如果您仍然有任何想法让我进一步在这些(d3js 和 canvasjs)中进行选择，请帮助它。

目的:我想创建一个交互式仪表板，在视觉效果上有很多交叉过滤器，有什么建议吗？API调用数据的方式；我应该完全从服务器获取数据并在 java 脚本中处理数据，还是应该分别获取每个图表的数据。

如果我从数据库中获取全部连接数据，则对于仪表板来说数据大小太大(超过 2 MB)，而如果我获取特定图表的精确数据，则数据大小会更少。一个例子可能有助于更好地理解。

假设我有销售 View 的数据，其中包含从不同表连接的多个列，并且我的仪表板有 4 个图表

chart 1: Bar chart for sales by item group 
chart 2: Pie chart for sales by sales person
chart 3: Line Graph showing the sales by hours (week days): trend of the sales at the shop
chart 4: Total Sales, Total Orders KPI

数据收集:我可以通过 REST API 分别获取每个图表的数据，该 API 将仅包含该图表的数据(或者)我可以从表的 JOIN 中获取整个数据，这将是巨大的(更多超过 2 MB，它会随着销量的增长而增长)。

交互性:当我单击图表 1(条形图)的任何项目组时，图表的其余部分应根据所选项目组进行过滤:(编写过滤器 js 代码会有所帮助，我对首选方式感到好奇)

我应该更喜欢哪种方法来获取数据和交叉过滤。

回答上述问题会引发更多疑问

谢谢

Answer 1

1. CanvasJs 更多的是使用 HTML5 的 canvas 元素创建图表，而 D3 使用 svg。这使得canvasJs比D3更有优势，因为CanvasJs具有快速响应时间，因此在CanvasJs中渲染速度很快。如果您想要快速响应时间并且不需要对数据进行太多计算/过滤，那么您可以使用 CanvasJs。
2. D3更多的是基于过滤器的过滤图表，可以根据您的情况使用。尽管您将处理销售数据。您将需要过滤器，以便一旦您将过滤器应用于一个图表，与该过滤器相关的更改应该反射(reflect)到其他图表。 D3 使用交叉过滤器，能够过滤掉所有相关信息并相应地渲染其他图表。
3. Canvas 和 D3 均支持数组、Json 和 CSV 格式。