d3堆叠条形图的排序数据 [英] sort data for d3 stacked bar chart

问题描述

我正在尝试创建d3堆叠条形图。数据格式如下

  var dataset = [{
effort：initial，
 co：[{
number：123，
act_effort：10 
}，{
number：456，
 act_effort：10 
}，{
number：678，
act_effort：0 
}努力：scope_creep，
co：[{
number：456，
act_effort：5 
}，{
 number：123，
act_effort：0 
}，{
number：678，
act_effort：15 
} 
}，{
effort：qc_support，
co：[{
number：456，
act_effort：5 
}，{
number：678，
act_effort：15 
}，{
number：123，
act_effort：5 
}] 
}，{
effort：uat_support，
co：[{
number： 456，
act_effort：0 
}，{
number：678，
act_effort：15 
}，{
number：123，
act_effort：0 
}] 
}]; 
  

由于未对数据进行排序，因此我的堆叠栏中的栏之间会有中断。

如果我将数据更改为下面的工作

  var dataset = [{
effort：initial，
co：[{
number：123，
act_effort：10 
}，{
number：456，
act_effort：10 
}，{
number：678，
act_effort：0 
}] 
}，{
effort：scope_creep，
co：[
 {
number：123，
act_effort：0 
}，{
number：456，
act_effort：5 
}，{
number 678，
act_effort：15 
}] 
}，{
effort：qc_support，
co：[{
number：123，
act_effort：5 
}，{
number：456，
act_effort：5 
，{
number：678，
act_effort：15 
}] 
}，{
effort：uat_support 
co：[{
number：456，
act_effort：0 
}，{
number：678 
act_effort：15 
}，{
number：123，
act_effort：0 
}] 
} 
  

这里是工作的 jsfiddle

我试着用d3.sort（）函数没有运气。

  dataset = dataset.sort（function（a，b）{return d3.ascending（ay，by）;} 
  
 
 
 
有人可以建议我如何实现这一点？提前感谢。
方案
我给你的 d.co.map 添加了一个排序，似乎已经做到了：
  var dataset = dataset.map（function（d）{
 return d.co.map（function（o，i）{
 //结构化它，使你的数字
 //轴（堆积量）是y 
 return {
y：o.act_effort，
x：o.number 
} ; 
}）。sort（function（a，b）{
 return d3.ascending（parseInt（ax），parseInt（bx））; 
}）; 
} ; 
  
 这里是一个更新的工作jsfiddle。
 
I am trying to create d3 stacked bar chart. Data format is below
  var dataset = [{
    "effort": "initial",
        "co": [{
        "number": "123",
            "act_effort": 10
    },{
        "number": "456",
            "act_effort": 10
    }, {
        "number": "678",
            "act_effort": 0
    }]
    }, {
        "effort": "scope_creep",
           "co": [{
        "number": "456",
            "act_effort": 5
    }, {
        "number": "123",
            "act_effort": 0
    }, {
        "number": "678",
            "act_effort": 15
    }]
},{
    "effort": "qc_support",
           "co": [{
            "number": "456",
               "act_effort": 5
        },{
        "number": "678",
            "act_effort": 15
    }, {
        "number": "123",
            "act_effort": 5
    }]
    }, {
    "effort": "uat_support",
        "co": [{
        "number": "456",
            "act_effort": 0
    },  {
        "number": "678",
            "act_effort": 15
    },{
        "number": "123",
            "act_effort": 0
    }]
}];
As the data is not sorted there are breaks between bars in my stacked bar.

If I change the data into below it works
var dataset = [{
    "effort": "initial",
        "co": [{
        "number": "123",
            "act_effort": 10
    },{
        "number": "456",
            "act_effort": 10
    }, {
        "number": "678",
            "act_effort": 0
    }]
}, {
    "effort": "scope_creep",
        "co": [
            {
        "number": "123",
            "act_effort": 0
    },{
        "number": "456",
            "act_effort": 5
    }, {
        "number": "678",
            "act_effort": 15
    }]
},{
    "effort": "qc_support",
        "co": [{
        "number": "123",
            "act_effort": 5
    },{
        "number": "456",
            "act_effort": 5
    },{
        "number": "678",
            "act_effort": 15
    }]
},{
    "effort": "uat_support",
        "co": [{
        "number": "456",
            "act_effort": 0
    },  {
        "number": "678",
            "act_effort": 15
    },{
        "number": "123",
            "act_effort": 0
    }]
}];
Here is the working jsfiddle 

I tried using d3.sort() function with no luck.
dataset = dataset.sort(function(a,b) { return d3.ascending(a.y, b.y);  }
Can some one suggest me how to achieve this? Thanks in advance.
解决方案
I added a sort to your d.co.map, and it seems to have done the trick:
var dataset = dataset.map(function (d) {
    return d.co.map(function (o, i) {
        // Structure it so that your numeric
        // axis (the stacked amount) is y
        return {
            y: o.act_effort,
            x: o.number
        };
    }).sort(function(a, b) {
        return d3.ascending(parseInt(a.x), parseInt(b.x));
    });
});
Here is an updated working jsfiddle.

                        
这篇关于d3堆叠条形图的排序数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！