dc.js : 차트의 끝 부분과 끝까지 연장하기

Question

dc.js를 사용하여 영역 차트를 그리려고하고 있습니다. 차트의 끝 날짜 (즉, 오른쪽 끝)는 현재 날짜를 기준으로합니다. 데이터 세트의 마지막 날짜 데이터 포인트 사이의 날짜 차이가있을 경우, 나는이 지역이 데이터 감안할 때 0

에서 한 지점에서 다음, 하지 무승부를 확장 할 :

var data = [ 
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "6/1/2014", lines_added: 100, lines_deleted: 50}, 
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "7/1/2014", lines_added: 100, lines_deleted: 50} 
     ]; 
var ndx = crossfilter(data); 

차트의 라인/영역은 현재 "7/1/2014"데이터 포인트로 끝나지 만 차트의 전체 길이를 늘리 길 원합니다.

var dateDim = ndx.dimension(function(d) {return d.commit_date;}); 
var minDate = dateDim.bottom(1)[0].commit_date; 
var maxDate = new Date(); 
var domainGroup = dateDim.group().reduceSum(function(d) {return d.cumulative_lines;}); 

unshippedlineChart 
    .width(500).height(200) 
    .dimension(dateDim) 
    .group(domainGroup) 
    .renderArea(true) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .brushOn(false) 
    .interpolate('step-after') 
    .yAxisLabel("Unshipped Value"); 

전체 예를 들어 당신은 실제로 :-) 질문을하지 않았다 http://jsfiddle.net/xayhkcvn/1/

Answer 1

에있다,하지만 난 당신이 방법을 모색 할 수있다 생각한다

차트를 그리기위한 관련 코드는 오늘까지 확장되도록 데이터를 사전 필터링하고 0을 제거 할 수 있습니다.

이 항목은 dc.js에 내장되어 있지 않지만 도움이 될 some example code in the FAQ입니다. 특히, 0을 제거하도록 그룹을 조정하는 함수 remove_empty_bins이 있습니다.

function duplicate_final_bin(source_group, key) { 
    return { 
     all:function() { 
      var ret = Array.prototype.slice.call(source_group.all()); // copy array 
      if(!ret.length) return ret; 
      ret.push({key: key, value: ret[ret.length-1].value}); 
      return ret; 
     } 
    }; 
} 

당신은 remove_empty_bins와이를 구성 할 수 있습니다 :

는

var super_group = duplicate_final_bin(remove_empty_bins(domainGroup), maxDate); 

아이디어는 동적으로 래퍼 개체를 만드는 것입니다

당신은 유사 (검증되지 않은) 최종 점을 추가하는 함수를 정의 할 수 있습니다 필요에 따라 (항상 변경되는) source_group.all()에서 항목을 추가하거나 제거합니다. dc.js는 다시 그릴 때마다 group.all()을 호출하고 이러한 래퍼는 해당 호출을 가로 채고 크로스 필터 그룹이 반환하는 데이터를 적용합니다.