使用 d3.js 对多个字段进行分组答案

【问题标题】：Group by with multiple fields using d3.js使用 d3.js 对多个字段进行分组
【发布时间】：2017-05-17 19:41:28
【问题描述】：

我正在尝试按 2 个字段 MessageGroupId 和 FlowId

对我的数据进行分组

（但我想要通用的方式，以防我必须对超过 2 个字段进行分组）

我的数据

 [
  {
    "Id": 46489,
    "Message": "Hi",
    "MessageGroupId": 46488,
    "FlowId": 99
  },
  {
    "Id": 46492,
    "Message": "Hi User",
    "MessageGroupId": 46490,
    "FlowId": 100
  },
  {
    "Id": 46494,
    "Message": "Loan",
    "MessageGroupId": 46490,
    "FlowId": 101
  },
  {
    "Id": 46496,
    "Message": "Call",
    "MessageGroupId": 46490,
    "FlowId": 101
  }
]

期望的输出

[
  {
    "MessageGroupId": 46488,
    "FlowId": 99,
    "values": [
      {
        "Id": 46489,
        "Message": "Hi",
        "MessageGroupId": 46488,
        "FlowId": 99
      }
    ]
  },
  {
    "MessageGroupId": 46490,
    "FlowId": 100,
    "values": [
      {
        "Id": 46492,
        "Message": "Hi User",
        "MessageGroupId": 46490,
        "FlowId": 100
      }
    ]
  },
  {
    "MessageGroupId": 46490,
    "FlowId": 101,
    "values": [
      {
        "Id": 46494,
        "Message": "Loan",
        "FlowId": 101,
        "MessageGroupId": 46490
      },
      {
        "Id": 46496,
        "Message": "Call",
        "FlowId": 101,
        "MessageGroupId": 46490
      }
    ]
  }
]

我知道 d3.nest 功能，但是当我尝试将它与多个键一起使用时

var nested_data = d3.nest()
.key(function(d) { return d.MessageGroupId; })
.key(function(d) { return d.FlowId; })
.entries(conversationData.Messages);

值是相互嵌套的

    [
  {
    "key": "46488",
    "values": [
      {
        "key": "99",
        "values": [
          {
            "Id": 46489,
            "Message": "Hi",
            "MessageGroupId": 46488,
            "FlowId": 99
          }
        ]
      }
    ]
  },
  {
    "key": "46490",
    "values": [
      {
        "key": "100",
        "values": [
          {
            "Id": 46492,
            "Message": "Hi User",
            "MessageGroupId": 46490,
            "FlowId": 100
          }
        ]
      },
      {
        "key": "101",
        "values": [
          {
            "Id": 46494,
            "Message": "Loan",
            "MessageGroupId": 46490,
            "FlowId": 101
          },
          {
            "Id": 46496,
            "Message": "Call",
            "MessageGroupId": 46490,
            "FlowId": 101
          }
        ]
      }
    ]
  }
]

我怎样才能获得想要的输出？

var data = [
      {
        "Id": 46489,
        "Message": "Hi",
        "MessageGroupId": 46488,
        "FlowId": 99
      },
      {
        "Id": 46492,
        "Message": "Hi User",
        "MessageGroupId": 46490,
        "FlowId": 100
      },
      {
        "Id": 46494,
        "Message": "Loan",
        "MessageGroupId": 46490,
        "FlowId": 101
      },
      {
        "Id": 46496,
        "Message": "Call",
        "MessageGroupId": 46490,
        "FlowId": 101
      }
    ]
    
    
 var nested_data = d3.nest()
    .key(function(d) { return d.MessageGroupId; })
    .key(function(d) { return d.FlowId; })
    .entries(data);

console.log(nested_data);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【问题讨论】：

编写一个函数，将 d3.nest 函数数据转换成你自己需要的格式。
怎么样？我想要通用的方法，而不仅仅是 2 个属性

标签： javascript d3.js grouping nest

【解决方案1】：

自己实现，使用原生javascript

用法

arr.groupBy(['MessageGroupId','FlowId'])

来源

Array.prototype.groupBy = function (props) {
   var arr = this;
   var partialResult = {};

   arr.forEach(el=>{

       var grpObj = {};

       props.forEach(prop=>{
             grpObj[prop] = el[prop]
       });

       var key = JSON.stringify(grpObj);

       if(!partialResult[key]) partialResult[key] = [];

       partialResult[key].push(el);

   });

   var finalResult = Object.keys(partialResult).map(key=>{
      var keyObj = JSON.parse(key);
      keyObj.values = partialResult[key];
      return keyObj;
   })

   return finalResult;
}

片段

var arr = [{ "Id": 46489,
    "Message": "Hi",
    "MessageGroupId": 46488,
    "FlowId": 99
  },
  {
    "Id": 46492,
    "Message": "Hi User",
    "MessageGroupId": 46490,
    "FlowId": 100
  },
  {
    "Id": 46494,
    "Message": "Loan",
    "MessageGroupId": 46490,
    "FlowId": 101
  },
  {
    "Id": 46496,
    "Message": "Call",
    "MessageGroupId": 46490,
    "FlowId": 101
  }
]

Array.prototype.groupBy = function (props) {
   var arr = this;
   var partialResult = {};
   
   arr.forEach(el=>{
   
       var grpObj = {};
       
       props.forEach(prop=>{
             grpObj[prop] = el[prop]
       });
       
       var key = JSON.stringify(grpObj);
       
       if(!partialResult[key]) partialResult[key] = [];
       
       partialResult[key].push(el);
       
   });
   
   var finalResult = Object.keys(partialResult).map(key=>{
      var keyObj = JSON.parse(key);
      keyObj.values = partialResult[key];
      return keyObj;
   })
   
   return finalResult;
}


console.log(arr.groupBy(['MessageGroupId','FlowId']))

【讨论】：