Question

我这里有一个傻瓜 - https://plnkr.co/edit/MErMvIgG9MOdXmjBPZVq?p=preview

我正在尝试创建一个堆积条形图的示例，在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]) });

Answer 1

鉴于您的date键/值对...

date: "2014"

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

d3.timeParse("%Y");

以下是更新的plunker：https://plnkr.co/edit/k8aZSlyCCtpWArOO0mki?p=preview

PS：你甚至不需要解析日期。由于您的y比例使用分类变量，因此只需使用现在的日期，即简单字符串。

堆积条形图未正确显示

1 个答案: