D3-如何根据其行索引合并2个数组

Question

我正在使用D3进行可视化，并且需要根据行索引合并2个数组：

var links = 
[
{"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"}  
];
var files =
[
{"File_Desc":"","DataName":""},
{"File_Desc":"Date","DataName":"Dates.01012016"},
{"File_Desc":"Address","DataName":"Address.01012016"}    
    ];

获得：

var result =
[
{"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"","DataName":""},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"Date","DataName":"Dates.01012016"},
{"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP","File_Desc":"Address","DataName":"Address.01012016"}
]

Answer 1

如果您可以使用后期模型JavaScript（又称ES2015），最短的路径是：

var result = links.map((d,i) => Object.assign({}, d, files[i]));

这很短。它也不会修改links或files（如果您希望与result分开使用它们）。

p.s。

评论表明您担心替代解决方案的运行时间。总的来说，他们都可以，特别是。作为D3应用中常见的一次性数据设置。但是，如果您有大数据集或经常运行记录合并，则可能需要优化。

如果您愿意更新现有的记录集，而不是创建新的记录集：

links.forEach((d,i) => Object.assign(d, files[i]));

之后，links具有更新的记录。它的运行速度比其他解决方案快7-10倍，这可能是因为它没有创建大量的新对象。如果您完成了原始的，未合并的links或files对象，则没有特殊原因可以避免这种"破坏性"或" Anto"更新。通常，几乎不需要优化一次性设置操作。但是，如果您愿意或需要这样做，这是一种强大的方法。

Answer 2

尝试以下：

var links = [
  {"source":"a0","target":"a0","s_portfolio":"a","t_portfolio":"a","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
  {"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"},
  {"source":"a1","target":"a2","s_portfolio":"a","t_portfolio":"c","SOURCE_TYPE":"APP","DES_TYPE":"APP"}  
];
var files = [
  {"File_Desc":"","DataName":""},
  {"File_Desc":"Date","DataName":"Dates.01012016"},
  {"File_Desc":"Address","DataName":"Address.01012016"}    
];
var result = [];
for(let i = 0; i < links.length; i++){
  result[i] = Object.assign(links[i], files[i]);
}
console.log(result);

Answer 3

我可能会在一个数组映射上迭代一个数组，然后在我的回调函数中使用像此答案中定义的函数这样的函数返回一个组合对象。

var result = links.map(combineLinkToFile);
function combineLinkToFile (link, index) {
    var file = files[index];
    return collect(link, file)
}
function collect() {
  var ret = {};
  var len = arguments.length;
  for (var i=0; i<len; i++) {
    for (p in arguments[i]) {
      if (arguments[i].hasOwnProperty(p)) {
        ret[p] = arguments[i][p];
      }
    }
  }
  return ret;
}

Answer 4

使用jquery map（）和Extend（）方法：

function mergeObjectsInArrays(arr1, arr2){
    return $.map(arr1, function(el, i){
        return $.extend(el, arr2[i]);
    });
};
// then pass your arrays:
var result = mergeObjectsInArrays(links, files);