DC.js永久链接或 HREF共享可视化筛选器状态

Question

我正在使用 dc 处理数据可视化.js （http://edouard-legoupil.github.io/3W-Dashboard/）

主要限制是，当用户在探索数据时发现特定事实时，要重现他们使用的确切过滤器以与其他用户共享他们的发现（并发起讨论）并不容易。解决方案可能是为每个过滤器状态提供永久链接。

dc.js 已经有"dc.redrawAll（）;"来重置所有过滤器，但是否有能力冻结某个过滤器状态并将其传递给 #href？

理想情况下，这样的href将通过分享按钮或通过常规的facebook/twitter共享功能进行共享。

任何代码片段或示例都会真正有所帮助！

提前感谢，爱德华

Answer 1

以下是您需要使用的关键方法：

• dc.chartRegistry.list（）：检索 dc 已加载的所有图表的数组
• chart.filters（）：检索给定图表的所有过滤器的数组
• chart.filter（）：将过滤器应用于给定图表
• dc.redrawAll（）：应用外部过滤器后重绘所有图表

从那里开始，只需序列化和反序列化对象即可。

以下是通过字符串化 JSON 对象来实现此目的的一种方法：

var filters = [];
for (var i = 0; i < dc.chartRegistry.list().length; i++) {
    var chart = dc.chartRegistry.list()[i];
    for (var j = 0; j < chart.filters().length; j++){
        filters.push({ChartID: chart.chartID(), Filter: chart.filters()[j]});  
    }
}
var urlParam =  encodeURIComponent(JSON.stringify(filters));

下面是解析 JSON 字符串和应用筛选器的反向过程：

var urlParam = ""; //have user input string somehow
var filterObjects = JSON.parse(decodeURIComponent(urlParam));
for (var i = 0; i< filterObjects.length; i++)
{
    dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filterObjects[i].Filter);
}
dc.redrawAll();

连接这两个步骤将取决于你的方案。 您也许可以将字符串保存到数据库中或将其追加为 url 参数。

此代码可能缺少一些边缘情况，但它似乎适用于基本的 dc.js 示例。