Javascript 如何在d3中对堆叠的钢筋进行排序?
我试图在d3中对水平堆叠条形图进行排序,但不断出现未定义的值,这会扰乱我的排序。我正在引用,但我一直得到“a.total=未定义”。(它出现在代码的后半部分,我已经为你们注释掉了。) 除了确保此代码正确排序之外,我的问题是:Javascript 如何在d3中对堆叠的钢筋进行排序?,javascript,sorting,d3.js,stacked-chart,Javascript,Sorting,D3.js,Stacked Chart,我试图在d3中对水平堆叠条形图进行排序,但不断出现未定义的值,这会扰乱我的排序。我正在引用,但我一直得到“a.total=未定义”。(它出现在代码的后半部分,我已经为你们注释掉了。) 除了确保此代码正确排序之外,我的问题是: 为什么它没有定义?我引用不同数据集的属性是否错误 如果是这样,如何访问各自数据集的属性而不局限于函数内部 我对d3和javascript完全陌生,所以任何评论都会有很大帮助,我感谢您的帮助!) //堆栈 风险值标题=[“AR_分数_2015”、“ER_分数_2015”、“
//堆栈
风险值标题=[“AR_分数_2015”、“ER_分数_2015”、“FS_分数_2015”、“CF_分数_2015”、“IF_分数_2015”、“IS_分数_2015”];
var保证金={
前20名,
右:50,,
底数:30,
左:20
},
宽度=800-边距.左-边距.右,
高度=500-margin.top-margin.bottom;
var x=d3.scale.linear()
.rangeRound([0,宽度]);
变量y=d3.scale.ordinal()
.rangeRoundBands([0,高度],.2);
var z=d3.scale.category10();
var color=d3.scale.ordinal()范围([“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”);
var xAxis=d3.svg.axis()
.比例(x)
.orient(“底部”)
var yAxis=d3.svg.axis()
.比例(y)
.东方(“左”);
//***画布设置***/
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
var csv=“Uni,AR\u评分\u 2015,ER\u评分\u 2015,FS\u评分\u 2015,CF\u评分\u 2015,如果评分\u 2015,则为评分\u 2015\n\
A、 400382\n\
B、 400394.4400399.6304\n\
C、 400374.8384.8386.4\n\
D、 400398399.6390.4291.2\n\
E、 399.2358.4400400360.8340.8\n\
F、 400355.6391.2386.4\n\
G、 399.6399.2394.4352382399.6\n\
H、 399.6400399.6318.4400400\n\
一、 399.6396314.4395.2400392\n\
J、 399.6385.2375.2366293.6326.4\n\
K、 400394371.6400188.8272.8\n\
五十、 400371.6315.6400370\n\
M、 381.2390376.8346400376\n\
N、 400285.2359.6262\N\
O、 388.8296400339.6386.4284.8\n\
P、 399.6386.8295.6388.4360.8264\n\
Q、 395.2389.6400322211.6266.4\n\
R、 380.8383.6359.6310381.6392.8\n\
S、 398.8392341.2286372.4391.6\n\
T、 400397.6400268132359.2\n\
U、 396.4378.8323.2281.6353.2369.2\n\
五、 398.4398350336.8191.2144.4\n\
W、 400399.6187.6399.6387.2317.2\n\
十、 400398.8296.8358.4229.6196\n\
Y、 377.2367.2263.2357.6400388\n\
Z、 385.6338.4399.2341.6,60.8229.6”;
var csvBase64=btoa(csv);
//***CSV启动***/
d3.csv(“数据:文本/普通;base64,”+csvBase64,类型,函数(错误,分数){
如果(错误)抛出错误;
分数。forEach(函数(d){
d、 2015年总体得分=+d.2015年总体得分;
d、 AR_得分(2015)=+d.AR_得分(2015);
d、 ER_评分(2015)=+d.ER_评分(2015);
d、 财政司司长2015年得分=+d.财政司司长2015年得分;
d、 CF_得分_2015=+d.CF_得分_2015;
d、 IF_得分IF_2015=+d.IF_得分IF_2015;
d、 IS_分数=2015+d.IS_分数=2015;
});
//***堆叠***/
var layers=d3.layout.stack()(headers.map(函数(c)){
返回分数。映射(函数(d){
返回{
x:d.大学,
y:d[c]
};
});
}));
var计数=0;
var i=0;
var layers2=layers.map(函数(分数){
返回分数。映射(函数(d){
d、 宽度=0;
var l=分数。长度;
如果(计数==l*5+i){
d、 总计=d.y0;
i++;
}
计数++;
返回{
x:d.y,
y:d.x,
x0:d.y0,
家长:d
};
});
});
//***绘图***/
y、 域(第2层[0])。映射(函数(d){
返回d.y;
}));
x、 域([0,d3.max(layers2[layers2.length-1],函数(d){
返回d.x/4+d.x0/4;
})])
.nice();
color.domain(d3.keys(分数[0])过滤器(函数(键){
返回键!=“Uni”;
}));
var layer=svg.selectAll(“.layer”)
.数据(第2层)
.enter().append(“g”)
.attr(“类”、“层”)
.attr(“转换”,函数(d){
返回“translate(0,+0+”);
})
.样式(“填充”,功能(d,i){
返回z(i);
})
.attr(“类”、“堆栈”);
图层。选择全部(“rect”)
.数据(功能(d){
返回d;
})
.enter().append(“rect”)
.attr(“y”,函数(d){
返回y(d.y);
})
.attr(“x”,函数(d){
返回x(d.x0/4);
})
.attr(“高度”,y.rangeBand())
.attr(“宽度”,函数(d){
d、 母体宽度+=x(d.x)-x(d.x0);
返回-(x(d.x0/4)-x(d.x/4+d.x0/4));
})
.on(“单击”,函数(){
sortBars();
});
svg.append(“g”)
.attr(“类”、“轴--x”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis);
svg.append(“g”)
.attr(“类”、“轴--y”)
.attr(“转换”、“转换(0,0)”)
.呼叫(yAxis);
//***分类***/
函数sortBars(){
//***这里有问题***//
var z=y.domain(layers2.sort(函数a,b){
console.log(“a.total=“+a.total,a,b”);
返回b.总计-a.总计;
})
.地图(功能(d){
返回d.layers2;
}))
.copy();
//***这是我引用的代码***/
var y0=y.domain(layers2.sort(this.id==“test”)?
功能(a、b){
返回b.总计-a.总计;
} :
功能(a、b){
返回d3.升序(a.总计,b.总计);
})
.地图(功能(d){
返回d.layers2;
}))
.copy();
控制台日志(y0);
svg.selectAll(“.stack”)
.排序(功能(a、b){
console.log(“y0(a.total)=”+z(a.total));
console.log(“y0(b.total)=”+z(b.total));
返回z(a总计)-z(b总计);
});
var transition=svg.transition().持续时间(750),
延迟=功能(d,i){
返回i*50;
};
if (count == l * 5 + i) {
d.total = d.y0;
i++;
}