D3.js d3浮动分组条，带有时间轴中的范围值

我试图了解我需要使用什么工具，因为我是d3新手，没有发现任何相关的东西

我需要一个面积图，这是像酒吧，但可以浮动，并在x轴和y轴上的多个值

在本例中，值为天，但可能为小时/月等

需要知道我要去的方向../要搜索的正确术语

---

绘制此图表与普通条形图之间没有显著差异

• 您需要定义一些将数据中的值映射到图表上坐标的方法
• 你需要画一些

  rect

因此，在上面的示例中，您将定义一个，给定输入日期，将其映射到图表上的某个x坐标。然后，您可以使用它来确定矩形左侧的坐标，并计算出矩形需要多宽

const xScale = d3.scaleTime()
  .domain([d3.min(dateValuesInMyDataset, d => d.date), d3.max(dateValuesInMyDataset, d => d.date)])
  .range([0, widthOfMyChart]);

如果给定数据集中最早的日期，上述

xScale

将返回值

0

，因为这是表示该日期的x坐标

类似地，您可能希望构造一个定义如何将数据集中的数值范围映射到图表中的y坐标的。然后，您可以使用比例来确定图表中所有矩形的y值和高度

有很多关于这方面的好例子，你可以浏览并查看它们的代码