我一直在尝试使用我自己的数据重新创建复杂的缩减示例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/。 我想我搞砸了设置值的访问者 有什么建议吗?
由于
答案 0 :(得分:1)
这只是一个拼写错误 - 在HTML中,条形图的标识#test-month
应为test-month
。哈希标记仅适用于选择器。
我还建议将x域的顶部偏移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。