以下是带有彩条的条形图的代码段:
var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });
var someColors = d3.scale.ordinal().domain(["a1","a2","a3","a4","a5","a6","a7","a8"])
.range(["#2980B9","#00FFFF","#008000","#FFC300","#FF5733","#D1AEF1","#C0C0C0","#000000"]);
barChart2
.height(250)
.width(1000)
.brushOn(false)
.mouseZoomable(true)
.x(d3.scale.linear().domain([600,800]))
.elasticY(false)
.dimension(Dim2)
.group(Group2)
.keyAccessor(function(d){ return d.key[0]; })
.valueAccessor(function(d){return d.value; })
.colors(someColors)
.colorAccessor(function(d){return d.key[1]; });
如何在此图表中添加图例?
答案 0 :(得分:1)
在crossfilter中使用复合键非常棘手,除非你确实需要,否则我不推荐它。
Crossfilter只能识别标量,所以即使你可以生成数组的维度和组密钥,并正确检索它们,crossfilter也会强制将这些数组强制转换为字符串,这会造成麻烦。
在这里,发生的事情是Group2.all()
按字符串顺序迭代您的数据,因此您按顺序获取密钥
[1, "a1"], [10, "a3"], [11, "a4"], [12, "a5"], [2, "a3"], ...
在不改变数据形状的情况下,解决此问题的一种方法是对legendables
函数中的数据进行排序:
barChart2.legendables = function() {
return Group2.all().sort((a,b) => a.key[0] - b.key[0])
.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
一个不相关的问题是dc.js非常字面地取X域,所以即使[1,12]
包含所有值,也没有显示最后一个条,因为右边在12处结束并且绘制了条形图在12到13之间。
所以:
.x(d3.scale.linear().domain([1,13]))
现在图例与数据匹配!
Fork of your fiddle (also with dc.css)
编辑:当然,您也希望图例项目是唯一的。您可以像这样定义uniq
:
function uniq(a, kf) {
var seen = [];
return a.filter(x => seen[kf(x)] ? false : (seen[kf(x)] = true));
}
向legendables
添加步骤:
barChart2.legendables = function() {
var vals = uniq(Group2.all(), kv => kv.key[1]),
sorted = vals.sort((a,b) => a.key[1] > b.key[1] ? 1 : -1);
// or in X order: sorted = vals.sort((a,b) => a.key[0] - b.key[0]);
return sorted.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
请注意,我们按d.something
的字符串值排序key[1]
。如注释所示,也可以按x顺序(d.SNo
,key[0]
)排序。我不建议按y排序,因为那是reduceSum
。
结果,排序和未完成: