積み上げ棒グラフは、私がここにplunkerを持って正しく

Question

を表示しません。私が持っている例は、さまざまな例の異なるものを組み合わせたものです。これは、軸を下と左に持つ水平のチャートを意味します。

どこに間違っているのかアドバイスをいただけますか？あなたのdateキー/値のペアを考える

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: "2014" 

...あなたの指定が正しくありません。それは次のようになります。https://plnkr.co/edit/k8aZSlyCCtpWArOO0mki?p=preview

PS：

ここ

d3.timeParse("%Y"); 

が更新plunkerあるあなたも、日付を解析する必要はありません。あなたのyスケールはカテゴリ変数を使用するので、現在の日付、つまり単純な文字列をそのまま使用してください。