Question

我正在尝试使用dc.js进行交互式数据可视化。

我的数据基本上是两个值系列，由每行指定的id属性区分。以下是我如何生成它的示例：

var data = [];
var n = 10000.;
for (var i = 0; i < n; i++) {
    data.push({id: 0, "i": i, x: Math.random()});
    data.push({id: 1, "i": i, x: (Math.random()+i/n)});
}

然后我将此数据集放入crossfilter对象并创建两个维度和两个组。一个用于显示每个id系列中分箱值的总和，另一个用于显示每id个所选总值的总和：

var cf = crossfilter(data),
    series = cf.dimension(function(d) {return [d.id, d.i];}),
    series_grouped = series
        .group(function(d){return [d[0], Math.floor(d[1]/100.)*100.];})
        .reduceSum(function(d) { return d.x; }),
    id = cf.dimension(function(d) {return d.id;}),
    id_grouped = id.group().reduceSum(function(d){return d.x;});

我设法使用下面的代码创建了我想要的图表。我无法做到的是互动行为：

当我在系列图表中选择一个范围时，左边的条形图不会更新（但它应该是）。
当我在系列图表中选择一个范围，然后选择一个条形时，条形图会消失。我无法从该状态恢复（通过重新加载页面之外的方式）。（我没有尝试在这里触发cf.filterAll()，因为我认为这不能解决我的根本问题。）

我如何获得左侧的条形图，当我在右侧的系列图表中选择一个范围时会更新？我做错了吗？

我使用的是Firefox 45.0.2，这些是我的库版本：

dc.js：2.0.0-beta.26
crossfilter.js：1.3.12
d3.js：3.5.16

这是完整的文件：

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <script src="crossfilter.js"></script>
    <script src="d3.js"></script>
    <script src="dc.js"></script>
    <link rel="stylesheet" type="text/css" href="dc.css" />
    <style>
        body { width: 960px; }
        .chart.left { width: 25%; }
        .chart.right { width: 75%; float: right; }
    </style>
</head>

<body>
    <div id="charts">
        <div id="chart_a" class="chart right"></div>
        <div id="chart_b" class="chart left"></div>
    </div>

    <script>
    // generate data
    var data = [];
    var n = 10000.;
    for (var i = 0; i < n; i++) {
        data.push({id: 0, "i": i, x: Math.random()});
        data.push({id: 1, "i": i, x: (Math.random()+i/n)});
    }

    // do some crossfilter stuff
    var cf = crossfilter(data),
        series = cf.dimension(function(d) {return [d.id, d.i];}),
        series_grouped = series
            .group(function(d){return [d[0], Math.floor(d[1]/100.)*100.];})
            .reduceSum(function(d) { return d.x; }),
        id = cf.dimension(function(d) {return d.id;}),
        id_grouped = id.group().reduceSum(function(d){return d.x;});

    // generate charts
    var chart_width = 960, chart_height = 200;
    dc.seriesChart("#chart_a").height(chart_height).width(.74*chart_width)
        .chart(function(c) { return dc.lineChart(c).renderArea(true); })
        .x(d3.scale.linear().domain([0,n]))
        .dimension(series)
        .group(series_grouped)
        .seriesAccessor(function(d) {return d.key[0];})
        .keyAccessor(function(d) {return d.key[1];})
        .valueAccessor(function(d) {return d.value;})
        .xAxis();
    dc.barChart("#chart_b").height(chart_height).width(.24*chart_width)
        .dimension(id)
        .group(id_grouped)
        .x(d3.scale.ordinal().domain([0,1]))
        .xUnits(dc.units.ordinal)
        .xAxis();

    dc.renderAll();
    </script>
</body>

Answer 1

至少你需要覆盖系列图表上的过滤器处理程序。现在，假设您在系列图表中选择i = 20到400。在Crossfilter上，它是series.filter([20,400])。但是您的系列维度值看起来像[0,150]，那么评估20 <= [0,150] && [0,150] <= 400是什么意思？很难说，几乎可以肯定不是你的意思。使用Crossfilter的自动类型转换，它可能正在评估"20" < "0,150" && "0,150" < "400"。相反，您可能希望它评估20 <= [0,150][1] && [0,150][1] <= 400，您可以强制它在自定义过滤器处理程序中执行。

Here是使用自定义过滤器处理程序“工作”的版本：

dc.seriesChart("#chart_a").height(chart_height).width(.74 * chart_width)
  .chart(function(c) {
    return dc.lineChart(c).renderArea(true)
      .filterHandler(function(dimension, filter) {
        if (filter[0]) {
          dimension.filterFunction(function(d) {
            return d[1] > filter[0][0] && d[1] < filter[0][1];
          });
        } else {
          dimension.filterAll();
        }
        setTimeout(dc.redrawAll, 0);
        return filter;
      });
  })
  .x(d3.scale.linear().domain([0, n]))
  .dimension(series)
  .group(series_grouped)
  .seriesAccessor(function(d) {
    return d.key[0];
  })
  .keyAccessor(function(d) {
    return d.key[1];
  })
  .valueAccessor(function(d) {
    return d.value;
  });

但是，正如您可能看到的，在Crossfilter中使用数组作为维度键是一个非常糟糕的主意（除非您在Crossfilter2中使用数组类型，这不是您想要的）。尺寸必须是自然排序的，并且在订购时阵列会以令人惊讶的方式起作用，因为我希望上面的解释说明。

那你做什么？我建议将数据转换为最佳选择：

var data = [];
var n = 10000.;
for (var i = 0; i < n; i++) {
    data.push({"i": i, x0: Math.random(), x1:(Math.random()+i/n)});
}

使用此数据，生成将x0和x1相加的组，然后使用堆栈混合（包含在标准dc.lineChart中）显示每个系列的行。

另一种更痛苦的方法是自行处理字符串的序列化和反序列化。只需要非常小心地考虑排序，这意味着您可能需要对值进行零填充，并且在序列化之前显式舍入浮点值可能是个好主意。在订购方面，您应该按i而不是id订购维度值，如果这是您要过滤的内容。

交互式图表（由dc.js）不能正确更新

1 个答案: