将 dc.js 过滤器存储在 URI 中并恢复它们答案

【问题标题】：storing dc.js filters in URI and restoring them将 dc.js 过滤器存储在 URI 中并恢复它们
【发布时间】：2015-02-24 20:09:36
【问题描述】：

在这里，我从每个图表中选择了 3 个过滤器 1，并将该编码的 url 粘贴到 url 参数中。但是当我按下解码 url 按钮时，它只重绘中间图表过滤器，而不是剩余的一次.. 我该怎么办？谢谢

function encodeFunction()
{
    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));
    alert(urlParam);
}
function decodeFunction()
{
    //encoded url here
    var urlParam="%5B%7B%22ChartID%22%3A1%2C%22Filter%22%3A2012%7D%2C%7B%22ChartID%22%3A2%2C%22Filter%22%3A%5B1.0454545454545454%2C4.045454545454545%5D%7D%2C%7B%22ChartID%22%3A3%2C%22Filter%22%3A%22Mr%20B%22%7D%5D ";

    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.renderAll();

    dc.redrawAll();
}

这里是小提琴：js fiddle link

【问题讨论】：

我不是 dc.js 方面的专家，但如果您通过 jsbeautifier.org 运行代码并且只提供与您的问题相关的代码，您可能会得到更多人愿意回答。如果抛出错误，也许堆栈跟踪也会有所帮助。这对我来说似乎是一个模糊的问题，如果你至少可以缩小你的问题是一个更好的问题。
我同意@PatrickRoberts。提出此类问题的更好/更有礼貌的方法是将您的代码放在 jsFiddle 中，以便人们可以尝试一下。然后仅在您的 SO 问题中发布相关部分。如果您编辑，将投票归零。 :-) 顺便说一句，这是一个有趣的问题。我们希望有一种规范的方式将过滤器存储在 URL 中。
谢谢你@Gordon.i vl 试试
修正了您的格式并添加了代码 sn-p。

标签： javascript d3.js dc.js

【解决方案1】：

看起来您的代码在一般情况下是正确的，但由于 dc.js 处理过滤器的方式有些怪异，您不能只从其序列化形式恢复范围过滤器。

我能够通过为数组添加一个特殊情况来使其工作：

   for (var i = 0; i< filterObjects.length; i++)
   {
       var filter = filterObjects[i].Filter;
       if(filter instanceof Array) filter = dc.filters.RangedFilter(filter[0], filter[1]);
       dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filter);
   }

这是我的小提琴叉：http://jsfiddle.net/gordonwoodhull/4dv93aht/10/

我认为不需要这种特殊情况，所以我在这里打开了一个问题：https://github.com/dc-js/dc.js/issues/819

【讨论】：

很高兴为您提供帮助。请接受答案……当然，这样我才能更好地跟踪标签。 ;-)
是的，它对我有用...@Gordon。再次感谢您

【解决方案2】：

看看这个问题和工作示例 dc.js permalink or href to share the visualisation filter state?

https://github.com/Edouard-Legoupil/3W-Dashboard/blob/gh-pages/index.html

【讨论】：

我更喜欢这种方法，因为它显式地获取过滤器并按名称而不是按索引应用它们 - 尽管问题中的代码适合快速而肮脏的解决方案。感谢分享，当我记录如何执行此操作时，我一定会使用它。目前这个问题可以作为非正式文档。