Question

我正在尝试构建一个关于如何replace a crossfilter data restoring dimensions and groups的问题的可重现示例 - 即在数据更新之前重新应用用户创建的任何过滤器。这是我实施the accepted answer的尝试。这是一个working 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>

Answer 1

以下是您的工作示例：XML to C# Class Generator

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

只需删除Crossfilter中的旧数据（ndx.remove()，但不添加过滤器），然后添加新数据（ndx.add(data2)），然后告诉dc.js自行更新（{{1} }）。这就是你需要对你的Crossfilter做的所有事情。

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

dc.redrawAll()

也就是说，从图表中抓取过滤器，将图表上的过滤器设置为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]); }，删除Crossfilter数据，然后将过滤器添加回图表。精确的过滤器格式有点棘手，而且必须将.filters（）的输出放在一个数组中以使其与.filter（）一起使用这一事实有点奇怪，但在dc.js中情况越来越好2.0测试版。

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

1 个答案: