dc.js永久链接或href共享可视化过滤器状态？ [英] dc.js permalink or href to share the visualisation filter state?

问题描述

我正在使用dc.js处理dataviz（ http：// edouard-legoupil。 github.io/3W-Dashboard/ ）

I am working on a dataviz with dc.js (http://edouard-legoupil.github.io/3W-Dashboard/)

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

The main limitation is that when users find a specific fact while they explore the data, it is not easy to reproduce the exact filters they used in order to share their findings with other users (and initiate a discussion). A solution could be to have permalinks for each filter state.

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

dc.js has already the "dc.redrawAll();" to reset all filter but is there any capacity to freeze a certain filters state and pass it to a #href?

理想情况下，此类href将通过共享按钮或通过常规的facebook / twitter共享功能。

Ideally such href would be then shared through a share button or through the regular facebook/twitter sharing function.

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

Any code snippet or examples would really help!

谢谢提前，
Edouard

Thanks in advance, Edouard

推荐答案

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

Here are the key methods that you will want to use:

• dc.chartRegistry.list（）：检索已加载直流的所有图表的数组


• chart.filters（） ：检索给定图表的所有过滤器数组


• chart.filter（）：将过滤器应用于给定图表


• dc.redrawAll（ ）：在应用外部过滤器后重绘所有图表

• dc.chartRegistry.list(): retrieves an array of all charts that dc has loaded
• chart.filters(): retrieves an array of all filters for a given chart
• chart.filter(): applies a filter to a given chart
• dc.redrawAll(): redraws all charts after applying external filters

从那里只需要序列化和反序列化对象。

From there it's just a matter of serializing and deserializing the objects.

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

Here is one way to do that by stringifying a JSON object:

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字符串并应用过滤器的相反过程：

Here is the reverse process of parsing the JSON string and applying the filters:

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参数附加。

Connecting the two steps will depend on your scenario. You could perhaps save the string to the database or append it as a url param.

此代码可能缺少某些边缘情况，但它似乎适用于基本直流.js例子。

This code might be missing some edge cases, but it seems to work for the basic dc.js examples.

这篇关于dc.js永久链接或href共享可视化过滤器状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！