Javascript 如何构建分区热图

使用D3，我想采用经典热图的数据可视化类型

。。在多个热图组的分区版本上，从单个数据源绘制数据

从技术上讲，这应该是一个热图元素从单个源提取数据-分离，因此应该通过对*.csv文件（第一组、第二组、第三组..）和处理样式的D3*.JS文件中的数据进行排序来进行聚类/分组

生成单个地图时：

    // Build X scales and axis:
    const x = d3.scaleBand()
    .range([0, width])
    .domain(myGroups)
    .padding(0.00);
    svg.append('g')
    .attr('transform', `translate(0,${height})`)
    .call(d3.axisBottom(x));

    // Build Y scales and axis:
    const y = d3.scaleBand()
    .range([height, 0])
    .domain(myVars)
    .padding(0.00);
    svg.append('g')
    .call(d3.axisLeft(y));

指定颜色：

      // Assign color scale
    const myColor = d3.scaleLinear()
    .range(['red', '#750606'])
    .domain([1, 100]);

和获取（样本）数据：

一直以来都很有魅力：

我正在努力将此基本结构扩展到如上所述的多个组的生成上。扩展颜色方案，尝试构建多个覆盖不同范围的额外X轴和Y轴，导致D3元素完全中断，导致地图根本无法显示

---

有人能告诉我如何在不破坏热图的情况下生成多个热图组的正确方向吗？

我能够使用基于行和列的程序来构建分区来解决分区问题：

    // Dimensions
  const numCategoryCols = 4;
  const numCategoryRows = Math.ceil(grouped.length / numCategoryCols);
  const numEntryCols = 3;
  const numEntryRows = Math.ceil(grouped[0].values.length / numEntryCols);
  const gridSize = 20;
  const width = gridSize * numCategoryCols * numEntryCols;
  const height = gridSize * numCategoryRows * numEntryRows;
  const tooltipArrowSize = 8;

  // Containers
  const container = d3
    .select("#" + containerId)
    .classed("heatmap-grid", true)
    .style("position", "relative");
  const svg = container
    .append("svg")
    .style("display", "block")
    .style("width", "100%")
    .attr("viewBox", [0, 0, width, height])
    .style("opacity", 0); 

    svg.transition()
    .duration(3000)
    .delay((d,i) => i*200)
    .style("opacity", 1)

  // Heatmap
  const gCategory = svg
    .selectAll(".category-g")
    .data(grouped, (d) => d.key)
    .join("g")
    .attr("class", "category-g")
    .attr("fill", (d) => color(d.key))
    .attr("transform", (_, i) => {
      const y = Math.floor(i / numCategoryCols);
      const x = i % numCategoryCols;
      return `translate(${gridSize * numEntryCols * x},${
        gridSize * numEntryRows * y
      })`;
    });
  const gEntry = gCategory
    .selectAll(".entry-g")
    .data((d) => d.values)
    .join("g")
    .attr("class", "entry-g")
    .attr("transform", (_, i) => {
      const y = Math.floor(i / numEntryCols);
      const x = i % numEntryCols;
      return `translate(${gridSize * x},${gridSize * y})`;
    });
  const entry = gEntry
    .append("rect")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .attr("fill-opacity", (d) => d.Severity / 100)
    .on("mouseenter", showTooltip)
    .on("mouseleave", hideTooltip);

    // Dimensions
  const numCategoryCols = 4;
  const numCategoryRows = Math.ceil(grouped.length / numCategoryCols);
  const numEntryCols = 3;
  const numEntryRows = Math.ceil(grouped[0].values.length / numEntryCols);
  const gridSize = 20;
  const width = gridSize * numCategoryCols * numEntryCols;
  const height = gridSize * numCategoryRows * numEntryRows;
  const tooltipArrowSize = 8;

  // Containers
  const container = d3
    .select("#" + containerId)
    .classed("heatmap-grid", true)
    .style("position", "relative");
  const svg = container
    .append("svg")
    .style("display", "block")
    .style("width", "100%")
    .attr("viewBox", [0, 0, width, height])
    .style("opacity", 0); 

    svg.transition()
    .duration(3000)
    .delay((d,i) => i*200)
    .style("opacity", 1)

  // Heatmap
  const gCategory = svg
    .selectAll(".category-g")
    .data(grouped, (d) => d.key)
    .join("g")
    .attr("class", "category-g")
    .attr("fill", (d) => color(d.key))
    .attr("transform", (_, i) => {
      const y = Math.floor(i / numCategoryCols);
      const x = i % numCategoryCols;
      return `translate(${gridSize * numEntryCols * x},${
        gridSize * numEntryRows * y
      })`;
    });
  const gEntry = gCategory
    .selectAll(".entry-g")
    .data((d) => d.values)
    .join("g")
    .attr("class", "entry-g")
    .attr("transform", (_, i) => {
      const y = Math.floor(i / numEntryCols);
      const x = i % numEntryCols;
      return `translate(${gridSize * x},${gridSize * y})`;
    });
  const entry = gEntry
    .append("rect")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .attr("fill-opacity", (d) => d.Severity / 100)
    .on("mouseenter", showTooltip)
    .on("mouseleave", hideTooltip);