d3.js - 过滤数据的最佳实践

Question

我的看法是，在使用过滤器构建动态图表时，每次用户请求过滤数据时，我都可以

1. 执行一个新的 MySQL 查询，并使用 MySQL 进行过滤。

   SELECT date,
     SUM(IF( `column` = `condition`, 1, 0)) as count
     ...
   

2. 执行一个新的 MySQL 查询，并使用服务器端语言（在我的例子中是 PHP）进行过滤。

   function getData(condition)  {
     $resultSet = mysqli_query($link, "SELECT date, column ... ");
   
     $count = 0;
     while ($row = mysqli_fetch_assoc($result_set)) {
         if ($row['column'] == 'condition') {
             $count++;
         }
     }
   }
   

3. 最初执行单个 MySQL 查询，将所有数据传递给客户端，并使用 Javascript & d3 进行过滤。

我希望答案不是非黑即白。例如，如果某个过滤器几乎没有被请求，那么让其他 95% 的用户等待相关数据可能没有意义，因此过滤器将需要一个新的数据调用。但我真的在考虑边缘情况 - 过滤器经常使用但特殊的情况。在这种情况下，将过滤逻辑放在前端、后端还是在我的数据库查询中更好？

Answer 1

一般来说，如果过滤可以在前端进行，应该在前端进行。优点是：

• 如果您的服务器出现故障也没关系
• 为您节省带宽成本
• 节省用户等待往返时间

缺点是它可能比后端更慢且更复杂。但是，取决于数据量，在很多情况下（例如您的示例），Javascript 已经足够好了。d3 甚至有一个内置的过滤器功能：

//remove anything that isn't cake
d3.selectAll('whatever')
  .filter(function(d){return d.type != 'cake'})
  .remove()    

如果您需要更复杂的过滤，例如基本聚合，您可以使用Crossfilter（也来自 Mike Bostock）或出色的 d3+crossfilter 包装器dc.js。