Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/447.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/sorting/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在d3中对堆叠的钢筋进行排序?_Javascript_Sorting_D3.js_Stacked Chart - Fatal编程技术网

Javascript 如何在d3中对堆叠的钢筋进行排序?

Javascript 如何在d3中对堆叠的钢筋进行排序?,javascript,sorting,d3.js,stacked-chart,Javascript,Sorting,D3.js,Stacked Chart,我试图在d3中对水平堆叠条形图进行排序,但不断出现未定义的值,这会扰乱我的排序。我正在引用,但我一直得到“a.total=未定义”。(它出现在代码的后半部分,我已经为你们注释掉了。) 除了确保此代码正确排序之外,我的问题是: 为什么它没有定义?我引用不同数据集的属性是否错误 如果是这样,如何访问各自数据集的属性而不局限于函数内部 我对d3和javascript完全陌生,所以任何评论都会有很大帮助,我感谢您的帮助!) //堆栈 风险值标题=[“AR_分数_2015”、“ER_分数_2015”、“

我试图在d3中对水平堆叠条形图进行排序,但不断出现未定义的值,这会扰乱我的排序。我正在引用,但我一直得到“a.total=未定义”。(它出现在代码的后半部分,我已经为你们注释掉了。)

除了确保此代码正确排序之外,我的问题是:

  • 为什么它没有定义?我引用不同数据集的属性是否错误
  • 如果是这样,如何访问各自数据集的属性而不局限于函数内部
  • 我对d3和javascript完全陌生,所以任何评论都会有很大帮助,我感谢您的帮助!)

    //堆栈
    风险值标题=[“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++;
    }