DC.js 날짜 축으로 막대 차트가 표시되지 않습니다.

Question

날짜 수가 표시되는 막 대형 차트를 표시하려고하는데 막대가 그려지지 않으며 콘솔에 NaN 오류가 표시됩니다.

누군가 내가 잘못 가고 있다고 말할 수 있습니까?

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 February 2017"}, 
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"}, 
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"}, 
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"}, 
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}]; 

var facts = crossfilter(data1); 
var dateDimension = facts.dimension(function(d) { return new Date(d.date); }); 
var dateGroup = dateDimension.group().reduceCount(function(d){return new Date(d.date);}); 

var minDate = dateDimension.bottom(1)[0].date; 
var maxDate = dateDimension.top(1)[0].date; 

dc.barChart("#chart1") 
    .width(800) 
    .dimension(dateDimension) 
    .group(dateGroup) 
    .brushOn(false) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .xUnits(d3.time.months); 

dc.renderAll(); 

Answer 1

dc.js가 단순히 문자열이 아닌 날짜로 이해할 수 있도록 날짜 형식을 먼저 결정해야합니다. 우리의 날짜와 달 필드를 만들기 위해 함수 다음

var dateFormat = d3.time.format('%d %B %Y'); 

: 그래서 먼저

, 날짜 형식을 설정하는 변수를 만들

data1.forEach(function(d) { 
    d.date = dateFormat.parse(d.date); 
    d.month = d3.time.month(d.date); 
}); 

그런 다음 변경 D를 사용할 수있는 차원과 그룹을 .month

var dateDimension = facts.dimension(function(d) { return d.month; }); 
var dateGroup = dateDimension.group().reduceCount(function(d){return 
d.month;}); 

이것은 월 단위로 그룹화되며 월별 총계/총계도 제공합니다. 내가 제대로 표시됩니다 모든 술집을 보장하기 위해 차트에 몇 가지 추가 속성을 추가 한

var dateFormat = d3.time.format('%d %B %Y'); 

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 
February 2017"}, 
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"}, 
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"}, 
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"}, 
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}]; 

var facts = crossfilter(data1); 

data1.forEach(function(d) { 
d.date = dateFormat.parse(d.date); 
d.month = d3.time.month(d.date); 
}); 

var dateDimension = facts.dimension(function(d) { return d.month; }); 
var dateGroup = dateDimension.group().reduceCount(function(d){return d.month;}); 

var minDate = dateDimension.bottom(1)[0].date; 
var maxDate = dateDimension.top(1)[0].date; 

dc.barChart("#chart1") 
.width(800) 
.dimension(dateDimension) 
.group(dateGroup) 
.brushOn(false) 
.x(d3.time.scale().domain([minDate,maxDate])) 
.xUnits(d3.time.months); 

dc.renderAll(); 

:

.gap(2) 
.outerPadding(5) 
.centerBar(true) 
.elasticX(true) 
.xAxisPadding(20) 

jsfiddle 예 : jsfiddle