交互式图表(通过 dc.js）未正确相互更新

Interactive Charts (by dc.js) not updating each other correctly

本文关键字：更新 js 通过 dc 交互式      更新时间：2023-09-26

我正在尝试使用 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)});
}

然后，我确实将此数据集放入交叉过滤器对象中，并创建两个维度和两个组。一个用于显示每个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
  • 交叉过滤器.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>

至少您需要覆盖系列图表上的过滤器处理程序。现在，假设您在系列图表中选择 i = 20 到 400。在交叉过滤器上，它说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 ，您可以在自定义筛选器处理程序中强制它执行此操作。

下面是使用自定义筛选器处理程序"工作"的版本：

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（如果要按）对维度值进行排序。

相关文章：