如何使用 dc.js 绘制表格列的箱线图答案

【问题标题】：How to draw box plot of columns of a table using dc.js如何使用 dc.js 绘制表格列的箱线图
【发布时间】：2019-04-08 11:35:08
【问题描述】：

我有一张如下表：

实验次数是任意的，但列名的前缀是“client_”，后跟客户编号。

我想使用 dc.js 针对“client_#”绘制值箱线图。该表是使用 d3.csv() 加载的 csv 文件。

有使用普通组的示例，但是我需要将每列显示为自己的箱线图，并且没有一个示例这样做。如何从每列创建箱线图？

【问题讨论】：

您可以检查以下示例作为开始observablehq.com/@d3/d3-box-plot
欢迎来到 SO！提问时请仅使用最具体的标签 - 确实您将使用 javascript 和 d3.js 来解决这个问题，但这个问题是关于 dc.js 的，了解 javascript 的人不一定能帮助您。
说明您遇到的确切问题也是一个好主意。我知道您的标题“说明了一切”，但重要的是要描述您找到的示例以及您的问题有何不同。据我了解，我已尝试填写您的问题。
是的。您对问题的理解是正确的。

标签： boxplot dc.js

【解决方案1】：

这与这个问题非常相似：

dc.js - how to create a row chart from multiple columns

许多相同的警告适用 - 无法使用此图表进行过滤（刷），因为每一行都对每个箱形图有贡献。

不同之处在于我们需要所有单独的值，而不仅仅是总和。

我没有要测试的示例，但希望这段代码可以工作：

function column_values(dim, cols) {
  var _groupAll = dim.groupAll().reduce(
    function(p, v) { // add
      cols.forEach(function(c) {
        p[c].splice(d3.bisectLeft(p[c], v[c]), 0, v[c]);
      });
      return p;
    },
    function(p, v) { // remove
      cols.forEach(function(c) {
        p[c].splice(d3.bisectLeft(p[c], v[c]), 1);
      });
      return p;
    },
    function() { // init
      var p = {};
      cols.forEach(function(c) {
        p[c] = [];
      });
      return p;
    });
  return {
    all: function() {
      // or _.pairs, anything to turn the object into an array
      return d3.map(_groupAll.value()).entries();
    }
  };
}

与行图问题一样，我们需要使用 groupAll 将所有数据分组到一个 bin 中 - 普通的交叉过滤 bin 不起作用，因为每一行都对每个 bin 都有贡献。

init 函数创建一个对象，该对象将以列名作为键。每个条目都是该列中值的数组。

add 函数遍历所有列并将每列的值按排序顺序插入到每个数组中。

remove 函数使用二进制搜索找到值并将其删除。

当.all() 被调用时，{key,value} 对将从对象构建。

column_values 函数的第一个参数采用维度或交叉过滤器对象，第二个参数采用列名数组。它返回一个fake group，每个客户端都有一个bin，其中键是客户端名称，值是该客户端按排序顺序排列的所有值。

你可以像这样使用column_values：

var boxplotColumnsGroup = column_values(cf, ['client_1', 'client_2', 'client_3', 'client_4']);
boxPlot
  .dimension({}) // no valid dimension as explained in earlier question
  .group(boxplotColumnsGroup);

如果这不起作用，请附上一个示例，以便我们一起调试。

【讨论】：