d3.js 轴标签未显示在响应条形图中答案

【问题标题】：d3.js axis labels not displaying in responsive bar chartd3.js 轴标签未显示在响应条形图中
【发布时间】：2017-09-26 22:43:14
【问题描述】：

我创建了一个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% 视口高度）。

如何才能让我的标签按要求显示？

【问题讨论】：

如果你想查看轴，那么你需要一个边距来留出空间（如果你这样做，它们可以相对于宽度和高度）。考虑关闭视图框调整大小并编写一个调整大小的方法来更新/重绘所有内容以响应容器高度/宽度的变化：bl.ocks.org/curran/3a68b0c81991e2e94b19。
@RyanMorton 我读过这种方法——根据容器大小的变化调整大小，但我也读到这不是推荐的方法。您能否使用这种方法将您的评论表述为一个工作示例？
@RyanMorton 我已经采用了您推荐的方法，但它并不能正常工作。有关所有详细信息，请参阅this question。

标签： css d3.js svg

【解决方案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)+")");

【讨论】：