javascript - 使用 d3.js 对多个字段进行分组

Question

我尝试按 2 个字段 MessageGroupId 和 FlowId 对数据进行分组

(但我想要通用的方式，以防我必须对两个以上的字段进行分组)

我的数据

 [
  {
    "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);
    
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

我自己实现了它，使用 native 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']))