How to load multiple files with Queue.js and D3.js?

Question

Situation

I am trying to load multiple xml files (located on server) without the need to declare the name of the files hard coded. For this I am trying to use the d3.queue library https://github.com/d3/d3-queue.

I have implemented the xml to force layout to my own needs (https://bl.ocks.org/mbostock/1080941), but there is one crucial flaw namely I need to manually type in the name of the xml file that I want to load...

Reproduce

Given (adjusted example from http://learnjsdata.com/read_data.html) :

queue()
  .defer(d3.xml, "/mappings/Customer.hbm.xml")
  .defer(d3.xml, "/mappings/Actor.hbm.xml")
  .await(analyze);

function analyze(error, Customer, Actor) {
  if(error) { console.log(error); }
  // do stuff with Customer data, do stuff with Actor data
}

And given my implementation of the processing of an xml:

d3.xml("mappings/Customer.hbm.xml","application/xml", function(error,xml){
    if (error) throw error;
    // do stuff with the data retrieved from Customer.hbm.xml
});

Question

How do I combine above two snippets in such a way that I dont have to write the locations of the xml hard coded and pass all the parameters to the analyze function? Any nudge in the right direction would be much appreciated.

In psuedocode I have tried to code something like the following (but I cant get it to work):

function to get all names of the xmls from the mappings folder (probably with node.js fs.readdir or fs.readdirSync methods, but I am unsure of how that would work exactly)
for each xml .defer(d3.xml, nameofxml)
pass all the found names as parameters to the analyze function

In Java I would have chosen to do this with a var...args but I dont know how to do it in JS.

Mark · Accepted Answer · 2016-03-19 15:53:15Z

5

There's really two parts to this question:

How do I get a list of server-side files to client-side JavaScript?

Short answer is you don't without having a server-side api that can return that list. Depending on what backend you are using, you write a method that returns a JSON array of the files in your target directory. You call this first, get the response and then process them all with queue:

d3.json('/get/list/of/xml/files', function(error, fileArray){
  var q = d3.queue();
  fileArray.forEach(function(d){
    q = q.defer(d3.xml, d);
  });
  q.await(analyze);
});

How do a process a variable number of arguments in JavaScript?

This is actually very well supported in JavaScript.

function analyze(error) {
  if(error) { console.log(error); }

  // skip 0 it's error variable
  for (i = 1; i < arguments.length; i++) {
    var xml = arguments[i];
    ...
  }
}

answered Mar 19, 2016 at 15:53

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sander_M Over a year ago

your answer is both beautifully writen, exactly what I was looking for and very easy to understand for a js beginner. Thank you very much. I will look into the server-side aspect. Luckily now I know where to look!

Collectives™ on Stack Overflow

How to load multiple files with Queue.js and D3.js?

Situation

Reproduce

Question

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Situation

Reproduce

Question

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related