dc.js - DataTable - объединение строк данных

Я создаю панель, и формат данных, как например:dc.js - DataTable - объединение строк данных

var data = [ 
    {"id": 'CDE', "count": 1, "name": 'ajdkf', "type": 'E', "state": 'A'}, 
    {"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'}, 
    {"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'}, 
    {"id": 'CDE', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'A'}, 
    {"id": 'HFG', "count": 1, "name": 'ajdkf', "type": 'E', "state": 'B'}, 
    {"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'}, 
    {"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'}, 
    {"id": 'HFG', "count": 0, "name": 'ajdkf', "type": 'E', "state": 'B'}, 
    {"id": 'ABF', "count": 1, "name": 'ghedw', "type": 'G', "state": 'A'}, 
    {"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'}, 
    {"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'}, 
    {"id": 'ABF', "count": 0, "name": 'ghedw', "type": 'G', "state": 'A'}, 
    {"id": 'DEF', "count": 1, "name": 'huiqs', "type": 'E', "state": 'A'}, 
    {"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'}, 
    {"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'}, 
    {"id": 'DEF', "count": 0, "name": 'huiqs', "type": 'E', "state": 'A'}, 
    ... 
    {"id": 'ABC', "count": 1, "name": 'asbsd', "type": 'D', "state": 'B'}, 
    {"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'}, 
    {"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'}, 
    {"id": 'ABC', "count": 0, "name": 'asbsd', "type": 'D', "state": 'B'} 
];

Я пытаюсь создать таблицу, которая выглядит как:

Name State A Count State B Count 
ajdkf 1    1 
ghedw 1    0 
huiqs 1    0 
asbsd 0    1

я в настоящее время:

<body> 
<div style='clear:both;'> 
    <table id="Stats"> 
    <thead> 
     <tr class="header"> 
      <th> name </th> 
      <th> State A Count </th> 
      <th> State B Count </th> 
     </tr> 
    </thead> 
    </table> 
</div> 
</body> 

<script> 
... 
var dataTable = dc.dataTable("#Stats"); 
var dataTableDim = ndx.dimension(function(d) {return d.name;}); 
dataTable 
    .dimension(dataTableDim) 
    .group(function(d) {return d.name}) 
    .columns([ 
     function(d) { return d.name; }, 
     function(d) { if (d.state == 'A') {return +d.count;} else {return 0;} }, 
     function(d) { if (d.state == 'B') {return +d.count;} else {return 0;} }, 
    ]); 
... 
</script>

И это дает мне таблицу, которая выглядит следующим образом:

Name State A Count State B Count 
asbsd 
asbsd 0    1 
asbsd 0    0 
asbsd 0    0 
asbsd 0    0 
ajdkf 
ajdkf 1    0 
ajdkf 0    0 
ajdkf 0    0 
ajdkf 0    0 
ajdkf 0    1 
ajdkf 0    0 
ajdkf 0    0 
ajdkf 0    0 
huiqs 
huiqs 1    0 
huiqs 0    0 
huiqs 0    0 
huiqs 0    0 
ghedw 
ghedw 0    0 
ghedw 1    0 
ghedw 0    0 
ghedw 0    0

Что мне нужно сделать, чтобы получить таблицу, которую я желаю? Я хотел бы иметь под 2 «столбцов» «Государство A» (граф и проценты) и то же самое для государства В. Что-то вроде:

Name  State A    State B 
     Count  Percent Count  Percent

jsfiddle: https://jsfiddle.net/56hgjgsz/14/

я не мог получить скрипт читать внешние файлы, поэтому мне пришлось добавить их в js .. извините :((https://jsfiddle.net/56hgjgsz/29/)

Это «работает», но не уменьшает количество строк в таблице, а порядок обратный -> тот же адрес, но с/32/вместо/14/или/29/

источник

2015-12-21 csymill26

oof, раздел «внешние ресурсы» в jsfiddle предназначен для указания на d3 и dc, вам не нужно включать источник! – Gordon

По какой-то причине это не сработало:/Извините, что – csymill26

Это действительно замедлило интерфейс скрипки; с которыми, должно быть, было очень тяжело работать! Также исправлено в моем обновленном ответе ниже. – Gordon

Не секрет, что вы можете передать группу в качестве .dimension() для таблицы данных. Это то, что вы хотите здесь, так как вы делаете обычные сокращения перекрестного фильтра, чтобы получить эти подсчеты.

Here's an example. (source)

Похоже, мы все еще должны задокументировать это!

Я не собираюсь набросать код для создания группы crossfilter для того, что вы хотите сделать, поскольку это довольно стандартно, но просто оставляйте комментарий, если эта часть неясна.

Вот код, чтобы обернуть группу, чтобы держать только бункеров, которые имеют значение для любого stateA или stateB - обратите внимание, что мы должны пройти N через, в отличие от групп:

function remove_empty_bins_dt(source_group) { 
    return { 
    top: function(N) { 
     return source_group.top(N).filter(function(d) { 
     return d.value.stateA !== 0 || d.value.stateB !== 0; 
     }); 
    }, 
    bottom: function(N) { // hacky but should work 
     return source_group.top(Infinity).filter(function(d) { 
     return d.value.stateA !== 0 || d.value.stateB !== 0; 
     }).slice(-N).reverse(); 
    } 

    }; 
}

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

Работа вилка вашей скрипкой: https://jsfiddle.net/gordonwoodhull/d86foxyq/5/

(если я правильно понял)

Можно обобщить это посмотреть на произвольное количество полей, но я из времени на сегодняшний день.

источник

2015-12-22 12:11:54 Gordon

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

Вы можете использовать фальшивую группу (https://github.com/dc-js/dc.js/wiki/FAQ#remove-empty-bins), чтобы пропустить пустые ячейки. – Gordon

Когда я использую remove_empty_bins() для создания новой группы, которая будет использоваться в качестве моего измерения (также когда я хочу сортировать данные по возрастанию, а не по убыванию), я получаю сообщение об ошибке: «_chart.dimension (...). не является функцией ". Вы знаете, почему я получаю эту ошибку? И как мне это исправить? – csymill26

dc.js - DataTable - объединение строк данных

ответ

Смежные вопросы