我在d3.js中创建了一个堆积条形图，但遇到了一些问题。我的图表如下所示（在D3.js中创建）：

但它应该看起来像这样（用Observable.Plot创建）：

如何将我的代码更改为：
1.在正确的位置显示X轴上的条形图
1.更改每个栏的高度以使其准确
1.更改每个条形图的颜色以准确显示正确的数据
1.由于宽度是动态的（日期范围可以在此函数外部更改），我可以将什么作为每个条形图的“宽度”？
如果我的数据结构不正确，请让我知道。我不确定它是否被d3.stack（）正确堆叠;
初始数据：（为简单起见，不必要的数据点被涂黑）

这是叠加后的相同数据：

每个阵列具有：
x1c4d 1x指令集
这是我的堆栈函数：

const stack: any = d3
      .stack()
      .keys(services) // string[]
      .value((x) => x.count); // count is a number

    var data = stack(props.data);

    console.log(props.data); // initial data array (as shown)
    console.log(data); // data array after stacking (as shown)

比例尺：

// x axis time scale
    const xAxisScale_min: Date = d3.min(props.data.map((i) => i.createdDate))!;
    const xAxisScale_max: Date = d3.max(props.data.map((i) => i.createdDate))!;
    const x = d3
      .scaleTime()
      .domain([xAxisScale_min, xAxisScale_max])
      .range([0, WIDTH]);

const yAxisScale_max: any = 10;
// y axis scale
const y = d3.scaleLinear().domain([0, yAxisScale_max]).range([HEIGHT, 0]);

这是创建每个矩形的代码

const rects = g.selectAll("rects").data(data);

    var color = d3.scaleOrdinal(services, d3.schemeCategory10);

    svg
      .append("g")
      .selectAll("g")
      // Enter in the stack data = loop key per key = group per group
      .data(data)
      .enter()
      .append("g")
      .attr("fill", function (d: any) {
        return color(d.key);
      })
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(function (d): any {
        return d;
      })
      .enter()
      .append("rect")
      .attr("x", function (d: any) {
        return x(new Date(d.data.createdDate));
      })
      .attr("y", function (d: any) {
        return y(d[1]);
      })
      .attr("height", function (d: any) {
        return y(d[0]) - y(d[1]);
      })
      .attr("width", WIDTH / props.data.length);

如果你需要x轴和y轴的网格信息，我也可以显示出来，但为了简单起见，我省略了它。