在d3 / Canvas JS中操作数据的最佳方法是什么？

Question

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

我对d3js和canvasjs中的选择很困惑。虽然d3js在良好的视觉效果方面具有丰富的功能，但我更喜欢画布，因为它很容易创建图表，如果你仍然有任何想法让我进一步选择这些（d3js＆amp; 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单独获取每个图表的数据，REST API只包含该图表的数据（或）我可以从表格的JOIN中获取整个数据，这将是巨大的（更多）超过2 MB，随着销售额的增长而增长）。

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

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

回答上述问题会引起更多怀疑

谢谢

Answer 1

1. CanvasJs更多的是使用HTML5的canvas元素创建图表，D3使用svg。这使得canvasJs优于D3，因为CanvasJs具有快速响应时间，因此CanvasJs中的渲染速度很快。如果您想要快速响应时间而不需要对数据进行大量计算/过滤，那么您可以使用CanvasJs。
2. D3更多是根据过滤器过滤图表，可以在您的情况下使用。虽然你将处理销售数据。您将需要过滤器，以便在将过滤器应用于一个图表后，与该过滤器相关的更改应反映到其他图表。 D3使用crossfilters，能够过滤掉所有相关信息并相应地渲染其他图表。
3. Canvas和D3都支持Arrays，Json和CSV格式。