dc.js/d3.js에 누적 막 대형 차트의 처음 2 개 항목이 표시되지 않습니다.

Question

시각화 프로젝트의 경우 d3 및 dc.js를 배우고 있습니다. 실험 URL은 다음과 같습니다. http://junklogic.com/d3scratch/index.html

다음과 같이 10 개의 작은 CSV 파일이 있습니다. 내가 처음 두 항목으로해야 할이 문제가 :

creature_name,seenby,date,severity 
Dragon,Bob,2013-11-11T10:23:24,1 
Dire Wolf,Sue,2013-11-11T08:24:23,3 
Unicorn,Jim,2013-11-12T11:10:10,1 
Unicorn,Ann,2013-11-12T12:45:45,1 
Kraken,Bob,2013-11-12T08:31:51,2 
Chimera,Ann,2013-11-12T01:05:08,2 
Unicorn,Ann,2013-11-13T04:49:36,1 
Unicorn,Bob,2013-11-14T09:22:26,1 
Chimera,Ann,2013-11-16T12:37:04,2 
Troll,Ann,2013-11-18T18:01:58,3 

2 개의 문제를 내가 가지고있다 : 첫째 날 (2013년 11월 11일)를 나타내는

1. 첫 번째 두 항목은 막 대형 차트에 표시되지 않습니다. 데이터 테이블과 파이 차트에 데이터가 올바르게 표시됩니다 (모두 10 개 항목).
2. "심각도"은 1에서 3까지의 계수입니다. 막 대형 차트에는 0에서 2가 표시됩니다. 데이터 테이블과 원형 그래프가 올바르게 표시됩니다.

도움을 주셔서 감사합니다. 이것은 새로운 경험이며 내 코드가 이해되기를 바랍니다.

Answer 1

x 축의 도메인은 "2013-11-11T10 : 23 : 24"에서 "2013-11-18T18 : 01 : 58"입니다.

var xScale = d3.time.scale().domain([new Date(data[0].date), new Date(data[data.length - 1].date)]); 

x 치수가 반올림되어 있으므로 "2013-11-11T00 : 00 : 00"으로 렌더링됩니다. 따라서 처음 두 값은 도메인의 하단보다 작습니다. d3.time.day ...를 사용하여 도메인을 계산할 수 있습니다. 각 끝의 일일 버퍼가있을 수 있습니다. ...

var xScale = d3.time.scale().domain([new Date(2013, 10, 10), new Date(2013, 10, 19)]); 

이 막대 차트의 범례에 관해서는, 각 스택의 이름을 지정할 수 있습니다

그렇지 않으면 인덱스로 설정됩니다 :

var severityByDay = info.dimension(function(d) { 
     return d3.time.day(d.date); 
    }); 

하면이 모든 막대를보고하십시오 스택 https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-latest.md#stack-mixin 가입일

:

.stack (그룹 [이름, 접근])을 임의로 지정 값으로 접근이 차트에 새로운 crossfilter기를 스택. 동일한 차트의 모든 스택은 동일한 키 접근자를 공유하므로 동일한 키 집합을 공유합니다. 좀 더 구체적으로 말하자면, 누적 막 대형 차트에서 상상하는 모든 막대는 수직으로 쌓아 올린 상태에서 x 축에 동일한 키 세트를 사용하여 배치됩니다. 이름이 지정되면 범례 레이블을 생성하는 데 사용됩니다.

.group(severityHigh, "1") 
     .stack(severityMed, "2") 
     .stack(severityLow, "3") 
     .colors(graphColors) 
     .colorDomain([1, 3]) 

난이 도움이되기를 바랍니다 :

이 올바른 가치와 올바른 색상을 보여주는 것 같다! -DJ