更新dc.js数据并重新应用原始过滤器

Question

更新dc.js数据并重新应用原始过滤器

我正在尝试构建一个关于如何替换恢复维度和组的交叉过滤器数据的问题的可重现示例- 即在数据更新之前重新应用用户创建的任何过滤器.这是我实施已接受答案的尝试.这是一个有效的jsfiddle.

脚本在3秒后刷新以切换data1到data2.如果您在此之前应用过滤器(例如,单击Mr A),则当图形更新时,"记住"过滤器,因为右侧元素突出显示(其他灰色显示).但是过滤器不会应用于其他图形.您需要删除过滤器并重新应用它才能工作(例如删除2013饼段).

我的实现或解决方案本身有问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
    <script type="text/javascript" src="http://dc-js.github.io/dc.js/js/d3.js"></script>
    <script type="text/javascript" src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script>
</head>
<body>
    <div id="chart-ring-year"></div>
    <div id="chart-row-spenders"></div>

    <script type="text/javascript">

var yearRingChart   = dc.pieChart("#chart-ring-year"),
    spenderRowChart = dc.rowChart("#chart-row-spenders");

var data1 = [
    {Name: 'Mr A', Spent: 40, Year: 2011},
    {Name: 'Mr B', Spent: 10, Year: 2011},
    {Name: 'Mr C', Spent: 40, Year: 2011},
    {Name: 'Mr A', Spent: 70, Year: 2012},
    {Name: 'Mr B', Spent: 20, Year: 2012},
    {Name: 'Mr B', Spent: 50, Year: 2013},
    {Name: 'Mr C', Spent: 30, Year: 2013}
];

var data2 = [
    {Name: 'Mr A', Spent: 10, Year: 2011},
    {Name: 'Mr B', Spent: 20, Year: 2011},
    {Name: 'Mr C', Spent: 50, Year: 2011},
    {Name: 'Mr A', Spent: 20, Year: 2012},
    {Name: 'Mr B', Spent: 40, Year: 2012},
    {Name: 'Mr B', Spent: 50, Year: 2013},
    {Name: 'Mr C', Spent: 50, Year: 2013}
];

// data reset function (adapted)
function resetData(ndx, dimensions) {
    dimensions.forEach(function(dim){dim.filter(null);});
    ndx.remove();
}

// set crossfilter with first dataset
var ndx = crossfilter(data1),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount();

function render_plots(){
    yearRingChart
        .width(200).height(200)
        .dimension(yearDim)
        .group(spendPerYear)
        .innerRadius(50);

    spenderRowChart
        .width(250).height(200)
        .dimension(nameDim)
        .group(spendPerName)
        .elasticX(true);

    dc.renderAll();
}

render_plots();

// REFRESH DATA AFTER 3 SECONDS
setTimeout(function() { 
    console.log("data reset");
    resetData(ndx, [yearDim, spendDim, nameDim]); 

    ndx = crossfilter(data2),
        yearDim  = ndx.dimension(function(d) {return +d.Year;}),
        spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
        nameDim  = ndx.dimension(function(d) {return d.Name;}),
        spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
        spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
        x = spendPerName,
        spendHist    = spendDim.group().reduceCount();

    render_plots();
}, 3000);

    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Eth*_*ett 13

以下是您的工作示例:http://jsfiddle.net/pm12xf3z/

有几个问题已得到纠正,但最重要的是,不要重建您的Crossfilter,您的尺寸或您的群组.这是不必要的.将使用新数据更新现有维度和组.

只需从Crossfilter中删除旧数据(ndx.remove()没有过滤器),然后添加新数据(ndx.add(data2)),然后告诉dc.js更新自己(dc.redrawAll()).这就是你需要对你的Crossfilter做的所有事情.

那么问题是如何删除所有过滤器并在此过程中维护dc.js过滤器？关键是要与您的dc.js图表进行交互,而不是直接与您的尺寸进行交互.对于您的序数选择图表,您可以执行以下操作:

function resetData(ndx, dimensions) {
    var yearChartFilters = yearRingChart.filters();
    var spenderChartFilters = spenderRowChart.filters();
    yearRingChart.filter(null);
    spenderRowChart.filter(null);
    ndx.remove();
    yearRingChart.filter([yearChartFilters]);
    spenderRowChart.filter([spenderChartFilters]);
}

Run Code Online (Sandbox Code Playgroud)

也就是说,从图表中获取过滤器,将图表上的过滤器设置为null,删除Crossfilter数据,然后将过滤器添加回图表.精确的过滤器格式有点棘手,而且必须将.filters()的输出放在一个数组中以使其与.filter()一起使用这一事实有点奇怪,但在dc.js中情况越来越好2.0测试版.

太棒了，实际上这真的很容易。[我根据这个答案添加了一个示例](http://dc-js.github.io/dc.js/examples/replacing-data.html)。 (3认同)

归档时间：	10 年，4 月前
查看次数：	8018 次
最近记录：	10 年，4 月前