2014-02-18 3 views
1

dc.js을 사용하여 데이터 테이블을 요약하려고하며 페이지 지정 및 기타 옵션에 대해 dynaTable 플러그인을 사용하고 있습니다.dc js - 여러 열 차원 만들기

일반적으로 dc.js 데이터 테이블에서 우리는 전체 데이터를 데이터에 표시합니다. 그러나 피벗 테이블과 같은 데이터를 요약하고 웹에 표시하려고하고 있으며 선택이 발생하면 데이터 테이블을 변경해야합니다.

dimensiongroup을 작성하여 완료했으며 그 그룹을 dynaTable으로 전달했습니다. 그리고 잘 작동합니다.

5 개의 데이터 열이 있다고 가정합니다. 그것의 모든 열에 차원을 만들 수 있습니다.

예 : 첫 번째 열에 차원을 만들고 마지막 열의 값을 그룹화합니다 (예 : A-20, B-42, C-50, D-20.). 이제는 내 그룹에 그 값과 변수가 포함되어 있습니다.

하지만 2-3 열을 결합하는 차원을 만들려고합니다.

예 :

 
A,AA,20 
A,AB,10 
A,AC,30 
A,AD,80 
B,BA,30 
B,BB,40 
B,BC,50 
B,BD,90 
C,CA,70 
C,CB,20 
C,CC,10 
C,CD,80 
D,DA,30 
D,DB,40 
D,DC,60 
D,DD,80 

이 같은 여러 열에서 치수를 만들 수 있습니까?

도와주세요. 내가 당신에게 작업 예제를 제공 할 수있는 유사한 http://jsfiddle.net/3v68c/3/

답변

2

당신이 JSFiddle를 제공하는 경우 또는 뭔가 : 여기

는 바이올린입니다. 그러나 대답은 예입니다. 원하는만큼의 열을 기반으로 차원을 정의 할 수 있습니다. 어떤 값에도 사용되지 않는 구분 기호 만 있으면됩니다. a, b, c 열이 있고 구분 기호 ','를 사용한다고합시다. 그렇다면 당신 :

var xfilter = crossfilter(data); 
var multidimension = xfilter.dimension(function (d) { 
    return d.a + ',' + d.b + ',' + d.c; 
}); 
+0

안녕하세요, user3206082, 저는이 질문에 답해달라고 부탁했으나 (Ethan은 이전 글을 기반으로했습니다) Ethan이 올바른 방향으로 여러분을 지적했습니다. 데이터가 포함 된 DC 차트를 작성하는 경우 그룹에 개별 필드가 분리되어 있는지 확인할 수 있습니다.즉, 연결을 사용하여 여러 열에 차원을 정의한 다음 해당 열의 실제 값을 그룹에 포함시킵니다. –

+0

@Ethan 구분 기호 제한을 피하기 위해 차원을 배열로 정의 할 수 있습니다 (예 : return [d.a, d.b, d.c]; –

+1

@SimonGiles 저는 보통 그렇다고 생각합니다. 그러나 CrossFilter에서 IIRC는 배열이 .toString()을 사용하여 강제 변환되므로 Crossfilter에서 내부적으로 실제로 쉼표로 구분 된 문자열로 처리됩니다. 나는이 변환 과정에서 잘못되었다는 이야기를 들었으므로 다른 사람들에게 배열을 사용하라고 말하지는 않지만 비밀리에 사용한다 ;-) –

0

http://jsfiddle.net/djmartin_umich/7R9wd/에 jsfiddle을 만들었습니다. 그것은 약간의 정리를 사용할 수 있지만, 그 점을 가로 지른다.

1) Ethan이 제안한 것처럼 연결된 필드가있는 차원을 만듭니다. 그래프에 날짜 만 측정 기준을 사용하기를 원하기 때문에 새 측정 기준을 만들었습니다. 이 경우 연결하기 전에 날짜를 문자열로 변환했습니다.() 또는 데이터 테이블에서 해당 필드에 dynaTable를 참조하십시오)

var dateDimTotal = dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 

    function reduceAdd(p, v) { 
     p.date = parseDate(d3.time.day.floor(v.date)); 
     p.label = v.label; 
     ++p.count; 
     p.total += v.value; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    } 

3 :

var dateLableDim = ndx.dimension(function(d) { return parseDate(d3.time.day.floor(d.date)) + " - " + d.label }); 

2) 그룹화 방법의 일환으로 실제 날짜와 라벨을 저장

var datatable = $('.table').dataTable({ 
     "aaData" : dateDimTotal.top(Infinity), 
     "bDestroy": true, 
     "aoColumns": [ 
      { "mData": function(d) { return d.value.label; }, "sDefaultContent": ""},     
      { "mData": function(d) { return d.value.date; }, "sDefaultContent": ""}, 
      { "mData": function(d) { return d.value.count; }, "sDefaultContent": ""}, 
      { "mData": function(d) { return d.value.average; }, "sDefaultContent": ""} 
     ] 
    }) 
0

dc.js Github의 시리즈 차트에 대한 간단한 특정 차트 예제를 보면 dc.js에서 여러 개의 키 필드의 배열로 직접 단일 차원을 만들 수 있습니다. 어떻게 수행되는지 확인할 수 있습니다.