Как нарисовать коробочный график столбцов таблицы, используя dc.js - PullRequest
Новая
       22

Как нарисовать коробочный график столбцов таблицы, используя dc.js

1 голос
/ 08 апреля 2019

У меня есть следующая таблица:

table

Число экспериментов произвольно, но префикс имени столбца - "client_", следующий за номером клиента.

Я хочу нарисовать прямоугольную диаграмму значений против "client_ #", используя dc.js.Таблица представляет собой CSV-файл, который загружается с использованием d3.csv ().

Есть примеры использования обычных групп, однако мне нужно, чтобы каждый столбец отображался в виде своего собственного блочного графика, и ни один из примеров не делает этого.Как я могу создать коробку из каждого столбца?

1 Ответ

1 голос
/ 09 апреля 2019

Это очень похоже на этот вопрос:

dc.js - как создать линейную диаграмму из нескольких столбцов

Применяются многие из тех же предостережений - невозможно будет отфильтровать (кисть) с помощью этой диаграммы, так как каждая строка вносит свой вклад в каждый блок-график.

Разница в том, что нам понадобятся все отдельные значения, а не только общая сумма.

У меня не было примера для тестирования, но, надеюсь, этот код будет работать: 

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 - обычные ячейки перекрестного фильтра не будут работать, поскольку каждая строка вносит вклад в каждую ячейку.

Функция init создает объект, которому будет присвоено имя столбца. Каждая запись является массивом значений в этом столбце.

Функция добавления проходит через все столбцы и вставляет значение каждого столбца в каждый массив в отсортированном порядке.

Функция удаления находит значение с помощью бинарного поиска и удаляет его.

Когда вызывается .all(), из объекта будут построены пары {key,value}.

Функция column_values принимает объект измерения или перекрестного фильтра для первого параметра и массив имен столбцов для второго параметра. Он возвращает поддельную группу с корзиной для каждого клиента, где ключом является имя клиента, а значением являются все значения для этого клиента в отсортированном порядке.

Вы можете использовать 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);

Если это не работает, пожалуйста, приложите пример, чтобы мы могли отладить это вместе.

...