如何用D3.js在单页绘制多图表？Apache Wicket循环渲染异常排查

我需要在单个页面基于不同条件绘制5个图表，当前通过循环调用函数并传入不同数据实现，但D3.js仅在循环结束时触发绘制函数，仅生成最后一个条件对应的图表。我使用的是Apache Wicket框架，相关代码如下：

Scala代码（Apache Wicket中生成JS的方法） #

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();
     });
   """
}

问题说明：
上述函数会调用下方的renderer模块，但每次调用时，renderer的init方法都会被执行并设置数据，render方法也会被调用，但每次都不会进入ready阶段，而是进入pending状态，直到最后一次才触发ready阶段，最终只绘制出最后一个图表。

Renderer模块代码 #

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;
    }
  };

});

Web Worker代码 #

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"
    });
  }
);

内容的提问来源于stack exchange，提问作者Sahil Bhardwaj