我们如何使用 d3.js 在单个页面上绘制多个图形。杰斯？

Question

我想根据不同的条件在单个页面上绘制 5 个图形。实际上，我正在使用循环并每次发送不同的数据，并根据该条件创建一个图表。但是不知道为什么库 d3.js 最后只触发绘制函数并根据最后一个条件创建单个图形。我也在使用 apache wicket 框架

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

Answer 1

使用d3.js在一个页面上绘制多个图形，可以使用d3.select()方法选择要绘制图形的容器元素，然后使用.append()方法将多个svg元素添加到容器中.然后，您可以在每个 svg 元素上使用 .append() 方法为每个图形添加所需的视觉元素，例如 g、rect、line 和 circle。

例如，如果您有一个 ID 为#chart 的容器元素，您可以使用以下代码向容器中添加两个 svg 元素，然后使用这些 svg 元素绘制两个不同的图形：

const container = d3.select("#chart");

const svg1 = container.append("svg");
// Draw the first graph using the svg1 element

const svg2 = container.append("svg");
// Draw the second graph using the svg2 element

将所需的 svg 元素添加到容器后，您可以在每个 svg 元素上使用 .append() 方法为每个图形添加可视元素。例如，如果要绘制条形图和散点图，可以使用以下代码：

const data = [
  { x: 1, y: 5 },
  { x: 2, y: 3 },
  { x: 3, y: 6 },
  { x: 4, y: 7 },
  { x: 5, y: 2 }
];

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 400 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// First graph: bar chart
svg1
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`)
  .selectAll(".bar")
  .data(data)
  .join("rect")
  .attr("class", "bar")
  .attr("x", d => x(d.x))
  .attr("y", d => y(d.y))
  .attr("width", x.bandwidth())
  .attr("height", d => height - y(d.y));

// Second graph: scatter plot
const x = d3
  .scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([height, 0]);

const g = svg2
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(-90)