0

I am brand new to D3 and begin working on a new project. My question is this. I need to load two local CSV files and visualize them to two separate line charts(not multi-line charts)，which contain independent x axis and y axis. The final purpose is to compare these two charts with a vertical line penetrating both of them and both charts can be zooming or panning synchronously.

I created two SVGs for both of two separate charts and used two consecutive calls to d3.csv() to load two csv files such as

d3.csv("file1.csv", function(error, data) {
   //functions control the first chart 

});

d3.csv("file2.csv", function(error, dataㄉ) {
   //functions control the second chart

});

However, finally I found that contents inside the first d3.csv() cannot be used in the second d3.csv().

Shouldn't I use different svg, or I need to apply new way to load two csv files but not using two independent d3.csv()?

altocumulus
  • 21,179
  • 13
  • 61
  • 84
zxcvb lee
  • 11
  • 2
  • Does this answer your question? https://stackoverflow.com/questions/21842384/importing-data-from-multiple-csv-files-in-d3 – xy2 Nov 05 '20 at 04:58

1 Answers1

0

You can use d3.queue to load the files at the same time. The function in .awaitAll() is only evaluated after both CSV files have been loaded, and the function .await() only waits for one of the CSV files to complete loading.

function delayedHello(callback) {
  setTimeout(function() {
    console.log("Hello!");
    callback(null);
  }, 250);
}

d3.queue()
  .defer(delayedHello)
  .defer(delayedHello)
  .awaitAll(function(error, data) {
    console.log(error ,data);
  });

d3.queue()
  .defer(delayedHello)
  .defer(delayedHello)
  .await(function(error, data) {
    console.log(error ,data);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
Ruben Helsloot
  • 12,582
  • 6
  • 26
  • 49
  • That is not fully correct: `.await()` does also wait until **all** tasks have finished. The difference between `.await()` and `.awaitAll()` is the way the results are passed on to the callback – altocumulus Nov 05 '20 at 10:15