d3.js軸ラベルが応答棒グラフに表示されない

Question

codepenを作成しました。基本的に、私の軸ラベルは正常に作成され、DOMに追加されますが、グラフ領域外に描画されているため表示されません。ここで

は私のCSSです：

.promo { 
    fill: rgba(255,0,0,0.5); 
} 

.price { 
    fill: $brand-primary; 
} 

.chart { 
    height: 50vh; 
    width: 100%; 
    overflow: hidden; 
} 

.svg-container { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; /* aspect ratio */ 
    vertical-align: top; 
    overflow: hidden; 
} 
.svg-content-responsive { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

そして、私のJS：私が遭遇した

let height = $('.chart').height(); 
let width = $('.chart').width(); 

let chart = d3.select('.chart') 
    .append("div") 
    .classed("svg-container", true) //container class to make it responsive 
    .append("svg") 
    .attr('preserveAspectRatio','xMinYMax meet') 
    .attr('viewBox','0 0 '+width +' '+height) 
    .classed("svg-content-responsive", true) 
    .append('g'); 
    //.attr("transform", "translate(50 0)"); 

let tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d) { 
       let date = new Date(d[0]); 
       let year = date.getFullYear(); 
       let allMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
       let month = allMonths[date.getMonth()]; 
       return `<strong>$${d[1]} Billion</strong><br>${year} - ${month}`; 
      }); 

chart.call(tip); 

let x = d3.scaleTime().range([0, width]); 

let y = d3.scaleLinear().rangeRound([height, 0]); 

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(response) { 
    let data = response.data; 

    x.domain([new Date(data[0][0]), new Date(data[data.length-1][0])]); 
    y.domain([0, d3.max(data, function(d) { return d[1]; })]); 

    let barWidth = width/data.length; 

    chart.append("g") 
     .attr("class", "axis x") 
     .attr("transform", "translate(0,"+(height)+")") 
     .call(d3.axisBottom(x).ticks(10)); 

    chart.append("g") 
     .attr("class", "axis y") 
     .call(d3.axisLeft(y).ticks(10)); 
    chart.append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Gross Domestic Product, USA"); 

    //here x is already the x axis time scale you have defined in your code 
    var left = x(new Date("Jun 3 1980")); 
    var right = x(new Date("Apr 22 2013")); //one more day 
    var wid = right - left; 
    chart.append("rect") 
    .attr("x", left) 
    .attr("width", wid) 
    .attr('class', 'promo') 
    .attr("height", height); 

    let bar = chart.selectAll('.bar') 
        .data(data) 
        .enter(); 

    bar.append('rect') 
    .attr('class', 'price') 
    .attr('x', function(d, i) { 
     return (i*barWidth); 
     }) 
    .attr('y', function(d) { return y(d[1]); }) 
    .attr("height", function(d) { return height - y(d[1]); }) 
    .attr("width", barWidth) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 
}); 

ソリューションは、特定のピクセルサイズでチャートに関連し、そしてこれらに余白を追加し、軸となるようラベルはこのスペースを占有します。実際には、このアプローチは、サイズに応じたサイズのグラフ（ビューポートの高さの100％幅と50％）では不可能です。

必要に応じてラベルを表示するにはどうすればよいですか？

Answer 1

私は上記のグラフではほとんど見ていません。 SVGの高さとx軸は同じ位置から始まります。軸の目盛りとテキストがsvgビューボックスから出てくるので、軸の可視性は隠されます。おそらくtransform属性を考えて、要素を適切に配置できます。 JSFiddle

X軸位置決め

chart.append("g") 
     .attr("class", "axis x") 
     .attr("transform", "translate(0,"+(height -20)+")") 
     .call(d3.axisBottom(x).ticks(10)); 

長方形のグループ化とポジショニング

var bar_g = chart.append("g") 
    .attr('class','rectg') 
    .attr("transform", "translate(0,"+(-20)+")");