Angular 堆叠条形图显示不正确

我这里有一个失物招领-

我试图创建一个堆叠条形图的示例，以角度进行此操作。我举的例子是来自不同例子的不同东西的混合。这是一个水平图，轴在底部和左侧

有人能就我的错误提出建议吗

let layer = this.svg.selectAll(".layer")
    .data(layers)
    .enter().append("g")
    .attr("class", "layer")
    .style("fill", (d, i) => {
        return colorFn(i);
    });

    layer.selectAll("rect")
    .data((d) => { return d; })
    .enter().append("rect")
    .attr("y", (d) => { return this.yScale(this.parseDate(d.data.date)); })
    .attr("x", (d) => { return this.xScale(d[0]); })
    .attr("height", this.yScale.bandwidth())
    .attr("width", (d) => { return this.xScale(d[1]) - this.xScale(d[0]) });

---

给定您的

日期

键/值对

date: "2014"

。。。您的说明符不正确。应该是：

d3.timeParse("%Y");

以下是更新的plunker：

---

附言：你甚至不需要解析日期。由于y标尺使用了一个分类变量，所以只需使用当前的日期，即简单的字符串。

不确定最终产品应该是什么样子，但轴的问题很简单：您要调用xAxis两次，并且从不提供

.call（this.yAxis）

。添加它将使y轴返回。您还将图表元素直接附加到svg元素，而不是转换后的

g

元素，从而导致它们与轴重叠。将图表从水平方向转到垂直方向的最佳方法是什么。现在，我需要沿着底部x轴的日期和垂直的堆叠图表。我已经尝试过交换xScale和yScale，但这不起作用——没有那么简单。此外，由于这与您的问题无关，我建议您将其作为新问题发布。