d3.js軸標籤不在響應條形圖中顯示

我創建了一個codepen來演示我的問題。基本上，我的軸標籤正在成功創建，並添加到DOM，但它們不顯示，因爲它們被繪製在圖表區域之外。d3.js軸標籤不在響應條形圖中顯示

這裏是我的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％）的圖表是不可能的。

我能做些什麼來讓我的標籤按要求顯示？

來源

2017-09-26 BrynJ

如果想看到軸，則需要一個餘量以允許空間（它們可以相對於寬度和高度如果你讓他們如此）。考慮關閉視圖框的大小並編寫一個resize方法，該方法根據容器高度/寬度的變化更新/重繪所有內容：https：//bl.ocks.org/curran/3a68b0c81991e2e94b19。 –

@RyanMorton我讀過關於這種方法 - 調整容器大小的變化，但我也讀過它不是推薦的方法。你能否使用這種方法將你的評論形成一個有效的例子？ – BrynJ

@RyanMorton我已經採取了你所推薦的方法，但是它的工作不正常。看到[這個問題]（https://stackoverflow.com/questions/46486646/d3-chart-redraw-not-working-on-window-resize）的所有細節。 – BrynJ

我對上面的圖表有幾點看法。 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)+")");

來源

2017-09-26 14:43:14

d3.js軸標籤不在響應條形圖中顯示

回答

相關問題