如何使用dc.js绘制表的列的箱形图

Question

我有一张桌子，如下：

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

我想使用dc.js针对“ client_＃”绘制值的箱形图。该表是使用d3.csv（）加载的csv文件。

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

Answer 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中-普通的交叉过滤器bins无效，因为每一行都对每个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);

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