2015-01-29 5 views
0

시간이 지남에 따라 기기 상태를 표시하려고합니다. 이 작업의 일부는 손으로 수행해야했던 보고서를 재현/자동화하는 것입니다. 그것은 기계가하고있는 것을 기반으로 Excel에서 2 분 '시간 조각'을 채색하는 것으로 구성됩니다.dc.js 히트 맵 확장 데이터

(죄송합니다, 충분하지 않은 평판이 사진을 게시 할 수 있지만,이 상태가 색상을 구동하는 고전적인 히트 맵입니다 일부 비 DC-JS 바이올린 :. http://jsfiddle.net/ww6Lbnc5/4/)

내가 뭘의 대부분을 생성 할 수 있었다를 I 다음 jsfiddle 원하는 : http://jsfiddle.net/hwhfxz2t/14/

See fiddle for code. 

(선택된 시간 프레임) 총 상태 지속 시간은 그 개별 상태 라인 및 사람에 사용되는 히트 맵 뒤에 상기 pieChart에 도시된다. (ZOOM 및 날짜 선택 버튼은 피들에서는 작동하지 않지만 원하는 경우 특정 데이터 범위를 선택하거나 확대 할 수 있습니다.)

꺾은 선형 차트는 상태를 입력 한 시간과 기간으로 구성된 상태의 원래 표현을 사용합니다.

히트 맵 작업을 수행하기 위해 원본 데이터를 가져 와서 개별 분으로 변환하고 상태로 표시해야했습니다. 그래서 예를 들어 원본 데이터 지정 :
        RUN 300
위한 14시 반 시작
상태가된다 :
        14 : 30 = RUN, 14 : 31 = RUN, 14 : 32 = RUN, 14 : 33 = RUN14 : 34 = RUN

233-297 줄의 코드는 원래 데이터를 반복하고이를 수행하는 새 데이터를 생성합니다. 주어진 분 안에 하나 이상의 상태가있는 경우 마지막 상태가 유지됩니다.

이 코드는 정상적으로 group(). reduce (add, remove, init)에서 수행되는 것과 같습니다. 하지만이 경우에는 상태 지속 시간에 따라 여러 개의 타임 슬롯을 추가해야합니다.

다른 교차 필터를 사용하기 때문에지도가 서로 업데이트되지 않습니다.

  1. 내가 모든 개별 '세포'에 대한 정보를 제공하지 않고 히트 맵을 표시 할 수 있습니다

    다음은이 관련된 내 질문은? (즉, 표의 행 간격과 유사한 값을 기준으로 셀을 확장 함)

  2. group(). reduce() 내에서 여러 값을 한 번에 추가 할 수 있습니까?
  3. 0이 맨 위에 오도록 yAxis를 반전하는 쉬운 방법이 있습니까?
  4. 히트 맵에서 행을 클릭하면 열이 선택되고 그 반대의 경우도 마찬가지입니다.

크로스 필터 그룹에 있어야하는지 잘 모르겠습니다. 그렇다면 제 거리를 무시하십시오. 그룹화로 연결된 차트를 유지하는 방법을 아는 분이라면 알려 주시기 바랍니다.

--Nico

+0

() (감소 하나의 레코드 RUN을 여러 그룹에 300 초 동안 14:30에 추가하십시오 (예 : 14:30, 14:31 등). groupAll(). reduce()를 사용하여이 작업을 수행 할 수 있지만 group(). reduce()와 약간 다르며 잘 설명되어 있지 않습니다. 실제로 이동 평균을 위해 Reductio와 Crossfilter (https://github.com/esjewett/reductio)를 사용하여 매우 유사한 문제로 사용할 수있는 방법을 보여줍니다. https : // gist.github.com/esjewett/8291936a4e4054342ba4 (또한 토론 https://github.com/esjewett/reductio/issues/12) –

답변

0

에 관한 질문 3 :

dc.js를의 히트 맵은 현재 축에 사용자 정의 주문 기능을 지원하지만 개발 브랜치로 통합되었으며에 액세스 할 수 있어야하는 pull request 존재하지 않습니다 곧 공개 될 것이다.

dc.js 파일을 수동으로 편집하여 히트 맵의 정렬을 사용자 정의 기능으로 설정할 수 있습니다. 최신 (2.0.0-beta10) 버전에서는 다음과 같은 라인이다. 나는 당신이 사용하는 그룹() 할 수 있다고 생각하지 않습니다

rowValues.sort(d3.ascending); 

따라

colValues.sort(d3.ascending);