如何用JavaScript绘制包含多个独立直方图的图形，每个直方图由16个具有随机高度的矩形构成？

在JavaScript中，你可以使用D3.js库来绘制这种含有多个独立直方图的图形。以下是简单的步骤：

1. 引入D3.js库：首先需要在HTML文件中引入D3库，通常通过`<script>`标签从cdnjs.com等CDN加载。

<script src="https://d3js.org/d3.v7.min.js"></script>

2. 创建SVG元素：D3操作的是SVG（Scalable Vector Graphics），在每个直方图容器上创建一个SVG区域。

const svgWidth = 800;
const svgHeight = 400;
const barWidth = 50; // 矩形宽度
const numBins = 16; // 等间距的16个直方块

// 为每个直方图创建SVG
const histograms = d3.select('body')
  .selectAll('div.histogram')
  .data([/* 数据数组，每个元素表示一组数据 */])
  .enter()
  .append('div')
  .attr('class', 'histogram')
  .append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);

3. 定义函数绘制直方块：创建一个函数，接收数据范围、当前直方图的SVG元素以及颜色作为参数，计算并绘制矩形。

function drawRectangles(dataRange, histogramSvg, color) {
  const binHeight = svgHeight / numBins;

  dataRange.forEach((datum, i) => {
    let x = i * (barWidth + 1); // 每个直方块的起始X坐标
    datum.forEach((value) => {
      histogramSvg.append('rect')
        .attr('x', x)
        .attr('y', svgHeight - value * binHeight) // 高度基于值
        .attr('width', barWidth)
        .attr('height', value * binHeight)
        .attr('fill', color);
      x += barWidth + 1; // 计算下一个直方块的位置
    });
  });
}

4. 绘制直方图：给每个数据集调用`drawRectangles`函数，并传递相应数据和颜色。

const colors = d3.scaleSequential(d3.interpolateBlues).domain([0, 16]); // 颜色渐变

// 对于每一个数据数组
data.forEach((dataset) => {
  const dataRange = [0, dataset.maxValue]; // 或者根据你的数据确定范围
  drawRectangles(dataRange, histograms[i].select('svg'), colors(i));
});

5. 结果展示：现在你应该看到页面上显示了几个独立的直方图，每个直方图由16个具有随机高度的矩形组成。