dc.js barChart가 렌더링되지 않습니다

Question

복잡한 축소 예제 인 http://dc-js.github.io/dc.js/examples/complex-reduce.html을 직접 만들었지 만 자체 데이터를 사용하여 렌더링 할 차트를 얻을 수 없습니다.

나는 이러한 기능 복사 :

function groupArrayAdd(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.right(elements, keyfn(item)); 
     elements.splice(pos, 0, item); 
     return elements; 
    }; 
    } 

    function groupArrayRemove(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.left(elements, keyfn(item)); 
     if (keyfn(elements[pos]) === keyfn(item)) 
     elements.splice(pos, 1); 
     return elements; 
    }; 
    } 

    function groupArrayInit() { 
    return []; 
    }; 

을 한 후 내 치수, 그룹 및 차트 설정 :

이

var monthKey = function(d) { 
    return d.month; 
    }; 

    var scoreValue = function(d) { 
    return d.points_per_date; 
    }; 

    var monthDimension = ndx.dimension(monthKey); 

    var monthAvgGroup = monthDimension.group().reduce(groupArrayAdd(monthKey), groupArrayRemove(monthKey), groupArrayInit); 


    function sumPoints(kv) { 
    return d3.sum(kv.value, scoreValue); 
    }; 

    var accessors = { 
    sum: sumPoints 
    }; 


    monthChart 
    .width(400) 
    .height(300) 
    .x(d3.time.scale().domain([d3.min(data, function(d) { 
     return d.month 
    }), d3.max(data, function(d) { 
     return d.month 
    })])) 
    .xUnits(d3.time.months) 
    .valueAccessor(sumPoints) 
    .elasticY(true) 
    .brushOn(true) 
    .controlsUseVisibility(true) 
    .dimension(monthDimension) 
    .group(monthAvgGroup); 

바이올린이 https://jsfiddle.net/santoshsewlal/pa524yLc/입니다. valueAccessor 설정이 엉망이라고 생각합니다.
제안 사항이 있으십니까?

감사

Answer 1

그냥 오타의 일 - HTML에 당신은 그냥 test-month을해야 할 때 줄이 ID #test-month 차트했다. 해시 표시는 선택자를위한 것입니다.

또한 dc.js를 아주 문자 그대로 도메인을 택해서 ​​자동으로 막대를위한 공간을 허용하지 않기 때문에 1 개월은 x 도메인의 상단을 상쇄 좋을 것 :

.x(d3.time.scale().domain([d3.min(data, function(d) { 
    return d.month 
}), d3.time.month.offset(d3.max(data, function(d) { 
    return d.month 
}),1)])) 

https://jsfiddle.net/pa524yLc/6/

막대 사이의 규모 차이는 정말 거대합니다. 막대 중 3 개는 누락 된 것처럼 보이지만 실제로는 작습니다. 좋을 렴 logarithmic scales worked better.