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

Question

我在可视化仪表板中工作，我面临的问题很少

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

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

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

假设我有销售视图的数据，其中包含从不同表连接的多个列，我的仪表板有 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 更多的是基于过滤器的过滤图表，可以在你的情况下使用。尽管您将处理销售数据。您将需要过滤器，以便一旦您将过滤器应用于一个图表，与该过滤器相关的更改应反映到其他图表。 D3 使用交叉过滤器，能够过滤掉所有相关信息并相应地呈现其他图表。
3. Canvas 和 D3 都支持数组、Json 和 CSV 格式。