集團通過使用d3.js

我想我的組數據由2場MessageGroupId和多個字段流ID集團通過使用d3.js

（但我想概括的方式，萬一我有一羣超過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);

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

來源

2017-05-15 bumbeishvili

寫這d3.nest功能數據轉換成自己需要的格式的功能。 –

怎麼樣？我想要這樣做的一種方式，不只是爲了兩個財產 – bumbeishvili

實現它自己，使用本地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']))

來源

2017-05-17 11:13:23 bumbeishvili

集團通過使用d3.js

回答

相關問題