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, когда это должно быть просто test-month. Хеш-метка предназначена только для селекторов.

Я также предлагаю компенсируя вершину х домена на 1 месяц, потому что dc.js занимает домен очень буквально и не позволяют автоматически пространство для баров:

.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/

Разница в масштабе между барами действительно огромна - три бара выглядят так, как будто их нет, но они просто очень маленькие. Желаю, чтобы logarithmic scales worked better.