dc.js barChart does not render
I've been trying to re-create the complex reduce example, http://dc-js.github.io/dc.js/examples/complex-reduce.html, using my own data but cannot get the chart to render.
I copied these functions:
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 [];
};
and then set up my dimension, group and chart:
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);
the fiddle is https://jsfiddle.net/santoshsewlal/pa524yLc/. I think I'm messing up on setting the valueAccessor.
Any suggestions?
Thanks
It's just a typo - in the HTML you gave the bar chart an id #test-month
when it should just be test-month
. The hash mark is just for selectors.
I'd also suggest offsetting the top of the x domain by 1 month because dc.js takes the domain very literally and does not automatically allow space for the bars:
.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/
The difference in scale between the bars is really huge - three of the bars look like they're missing but they're just really small. Wish that logarithmic scales worked better.
链接地址: http://www.djcxy.com/p/32802.html上一篇: crossfilter如何简单地从一组中的值中获得总和
下一篇: dc.js barChart不呈现