How we can draw multiple graph on a single page using d3. js?

Question

I want to draw 5 graph a single page based on different condition. Actually I am using a loop and send different data each time and based on that condition I want to create a graph. But don't know why the library d3.js is only trigger the draw function in the end and create a single graph based on last condition. also I am using apache wicket framework

I call the function 5 time using a loop and send different data



final def rawData(id:String): String = {
  
  s"""
     require(["renderer"], function (renderer) {

     renderer.init("#${id}");
     var data = 'digraph g {\\n ${data.attributes.trim} \\n' +
                 ${if (nodes.isEmpty) "''" else nodes} +
                 ${if (links.isEmpty) "''" else links} +
               '}';
     const getData = async() => {
       await renderer.render(data);
     }
     getData();
     });
   """
}



Upper function trigger the below function but in below function init function is call each time and set the data in javascript . Also render function is also call each time but it is not going to ready stage  each time it is going in pending and in last it trigger the ready stage and draw the last graph only.  







define('renderer',["stage", "worker!layout-worker.js"], function(stage, worker) {

  var initialized = false, pending, errorCallback, renderCallback;
var bool =false;
  worker.onmessage = function (event) {

    switch (event.data.type) {
      case "ready":
        initialized = true;
       
        if (pending) {
          worker.postMessage(pending);
        }
        break;
      case "stage":
        stage.draw(event.data.body);
        console.log("stage =================> ",event.data.type);
        renderCallback && renderCallback();
        break;
      case "error":
        if (errorCallback) {
          errorCallback(event.data.body);
        }
    }
  };

  return {
    init: function(element) {
         
      return stage.init(element);
    },
    render: function(source) {
      if (initialized) {
        worker.postMessage(source);
      } else {
        pending = source;
      }
    },
    stage: stage,
    errorHandler: function(handler) {
      errorCallback = handler;
    },
    renderHandler: function(handler) {
      renderCallback = handler;
    }
  };

});







require(/*{
    baseUrl: "."
  },*/
  ["transformer"],
  function(transformer) {

    onmessage = function(event) {
      try {
        var result = transformer.generate(event.data);
        postMessage({
          type: "stage",
          body: result
        });
      } catch (e) {
        postMessage({
          type: "error",
          body: e
        });
      }
    };

    postMessage({
      type: "ready"
    });
  }
);