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

Question

我有一张表如下：

实验数量是任意的，但列名称的前缀是客户端编号后面的“client_”。

我想使用dc.js在“client_＃”上绘制一个值的方框图。该表是使用d3.csv（）加载的csv文件。

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

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中 - 普通的crossfilter bin不起作用，因为每行都有助于每个bin。

init函数创建一个将按列名称键入的对象。每个条目都是该列中值的数组。

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

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

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

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

你可以像这样使用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);

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