将多个SVG加载到javascript数组中，无需DOM追加

我想做以下几点：

function loadSvg(path) {
  d3.xml(path, 'image/svg+xml', function(xml) {
    return xml.documentElement;
  });
}

d3.json(jsonOfSvgFileNames, function(paths) {
  // paths = ['pathName','pathName2',...]
  var svgList = [];

  for(var p in paths) {
    var path = paths[p],
        svg = loadSvg(path);
    svgList.push(svg);
  }
});

我遇到了

xml.document

对象在

d3.xml

调用完成后消失的问题。我知道持久性的问题对于其他类型的服务器调用可能是个问题，但我不确定需要使用什么关键字来找到答案

一种解决方法是按需发出服务器请求，然后在

d3.xml

调用中将SVG附加到DOM中，但这不是我的应用程序的选项。在我的应用程序中，时间很重要，即使300毫秒的等待也太多，这就是为什么我更喜欢批量加载

---

忍者编辑：我发现这是因为异步调用，对象在加载之前被推入数组。承诺是否是可接受的解决方案（例如，

load（）。然后（push）

）？我没有太多的承诺。有一个公认的承诺标准库吗？

承诺确实是一条路要走：

var svgs = [];

$.when( loadData('gridList.json') ).then(function(status){
  console.log( status )
  for (var i = 0; i < svgs.length; i ++){
    $("body").append(svgs[i]);
  }
})


function loadSVG(path){
  var dfd = new jQuery.Deferred();
  d3.xml(path, 'image/svg+xml', function(xml) {
    svgs.push( xml.documentElement );
    dfd.resolve("loaded " + path);
  });
  return dfd.promise();
}


function loadData(jsonFile){
  var dfd = new jQuery.Deferred();
  d3.json(jsonFile, function(paths) {
      for( var i = 0; i < paths.length; i++ )
      $.when( loadSVG(paths[i]) ).then( function(status){
        console.log( status );
        if (svgs.length == paths.length)
          dfd.resolve( "All SVGs loaded!" )
      });
  });
  return dfd.promise();
}

var svgs=[]；
$.when（loadData（'gridList.json'））。然后（函数（状态）{
console.log（状态）
对于（变量i=0；i

承诺确实是一条路要走：

var svgs = [];

$.when( loadData('gridList.json') ).then(function(status){
  console.log( status )
  for (var i = 0; i < svgs.length; i ++){
    $("body").append(svgs[i]);
  }
})


function loadSVG(path){
  var dfd = new jQuery.Deferred();
  d3.xml(path, 'image/svg+xml', function(xml) {
    svgs.push( xml.documentElement );
    dfd.resolve("loaded " + path);
  });
  return dfd.promise();
}


function loadData(jsonFile){
  var dfd = new jQuery.Deferred();
  d3.json(jsonFile, function(paths) {
      for( var i = 0; i < paths.length; i++ )
      $.when( loadSVG(paths[i]) ).then( function(status){
        console.log( status );
        if (svgs.length == paths.length)
          dfd.resolve( "All SVGs loaded!" )
      });
  });
  return dfd.promise();
}

var svgs=[]；
$.when（loadData（'gridList.json'））。然后（函数（状态）{
console.log（状态）
对于（变量i=0；i

您可以将svg推到

d3.xml

中的数组上。在函数完成之前，将所需内容复制到其他内存位置。我也尝试过这样做，但仍然存在异步问题。它最终会进入阵列，但无法保证何时填充。我看得越多，承诺就越像是答案。你可以将svg推到

d3.xml

中的数组中。我在想类似于Lars的东西。在函数完成之前，将所需内容复制到其他内存位置。我也尝试过这样做，但仍然存在异步问题。它最终会进入阵列，但无法保证何时填充。我看得越多，承诺就越像是答案。