创建 dc.js 图表的缩略图答案

【问题标题】：Creating thumbnails of dc.js charts创建 dc.js 图表的缩略图
【发布时间】：2014-06-28 20:45:23
【问题描述】：

您好，我想要我的 dc.js 图表的缩略图，点击后可以查看图表的完整视图。现在我正在创建 2 个图表，一个具有较小的尺寸（缩略图），一个具有实际尺寸。我面临的问题是在大图表上完成的过滤没有反映在缩略图中。

我希望缩略图图表反映已应用于较大图表的过滤器。

缩略图也可以是交互式的或被动的。

【问题讨论】：

你现在是如何制作过滤器的？您可以只使用保存的 svg 作为缩略图，然后使用渲染的 d3 图表作为完整的。
dc.js 有一个与图表关联的 .filter() 方法。现在我可以创建 2 个单独的图表，并在对一个图表进行过滤时在另一个图表上调用 .filter() 。我想知道是否有更好的方法
点击时只是改变图表的大小？我保存的 svg 方法也可以。

标签： d3.js dc.js

【解决方案1】：

我相信您对基于相同维度构建的图表经常感到困惑来自https://github.com/square/crossfilter/wiki/API-Reference：

注意：分组与交叉过滤器的当前过滤器相交，关联维度的过滤器除外。因此，组方法只考虑满足除此维度过滤器之外的所有过滤器的记录。因此，如果支付的交叉过滤器是按类型和总计过滤的，那么按总计分组只观察按类型过滤。

我在这里创建了一个简单的示例：http://jsfiddle.net/djmartin_umich/94UHh/

    teamMemberChart
        .width(270)
        .height(220)
        .dimension(teamMemberDimension)
        .group(teamMemberGroup)
        .elasticX(true);

    teamMemberChart2
        .width(540)
        .height(440)
        .dimension(teamMemberDimension)
        .group(teamMemberGroup)
        .elasticX(true);

对此的一个常见解决方案是使用相同的字段创建第二个维度和组。然而，这并不完全是您要查找的内容，因为第二个图表将仅显示过滤后的结果......原始图表应包含已选择和未选择的值。

相反，我建议您尝试这个问题的公认答案：Whats the best way to make a d3.js visualisation layout responsive?

在这种方法中，调整 svg 元素以适应外部容器。也许您可以根据自己的需要调整这种方法。

【讨论】：