D3.js 筛选数据的最佳实践

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

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

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

执行一个新的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++;
      }
  }
}

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

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

---

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

一般来说，如果筛选可以在前端完成，那么应该在前端完成。优点是：

• 不管你的服务器是否停机
• 节省带宽成本
• 节省用户等待往返时间

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

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

如果您需要更复杂的过滤，例如基本聚合，您可以使用（同样来自Mike Bostock）或优秀的d3+交叉过滤器包装器