title: d3js v4 x-axis-label is there but not visible
body: <p>I need to make the x-axis-label (and y-axis-label as well) of my bar-chart <strong><em>visible</em></strong>. In this case, <strong>y-axis-label</strong> must be: "Unemployment Rate", and <strong>x-axis-label</strong>: Regions in Vietnam. Through Chrome's inspection tool, I prove those elements are there, but they're simply hidden. For example, the y-axis-label: </p>
  
  <ul>
  <li>HTML SVG Text element of y-axis-label was created </li>
  <li>The display shows a selected area for this element</li>
  <li>Color of this element is <em>RED</em> (I made it manually in Chrome), not same color as background. </li>
  </ul>
  
  <p>Screenshot and code are put below. I understand this must be some stupid mistakes but unfortunately I'm not able to figure it out by myself after 1 day. Please help. </p>
  
  <p><a href="https://i.stack.imgur.com/29nA8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/29nA8.png" alt="enter image description here"></a></p>
  
  <p>Link to JSfidle: <a href="https://jsfiddle.net/ngminhtrung/703exxc0/" rel="noreferrer">https://jsfiddle.net/ngminhtrung/703exxc0/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [{
      "area": "Đồng bằng sông Hồng",
      "age1": 9.62,
      "age2": 1.45,
      "age3": 20
    },
    {
      "area": "Trung du và miền núi phía Bắc",
      "age1": 2.95,
      "age2": 20,
      "age3": 20
    },
    {
      "area": "Bắc Trung Bộ và duyên hải miền Trung",
      "age1": 8.26,
      "age2": 20,
      "age3": 20
    },
    {
      "area": "Tây Nguyên",
      "age1": 2.47,
      "age2": 20,
      "age3": 20
    },
    {
      "area": "Đông Nam Bộ",
      "age1": 8.02,
      "age2": 20,
      "age3": 20
    },
    {
      "area": "Đồng bằng sông Cửu Long",
      "age1": 8.19,
      "age2": 20,
      "age3": 20
    }
  ];
  
  var w = data.length * 100;
  var h = 600;
  var barHeight = 30;
  var margin = {
    top: 100,
    bottom: 200,
    left: 150,
    right: 100
  };
  var width = w - margin.left - margin.right;
  var height = h - margin.top - margin.bottom;
  var formatAsPercentage = d3.format(".1%");
  
  var x = d3.scaleBand()
    .domain(data.map(function(entry) {
      return entry.area;
    }))
    .range([0, width]);
  
  
  var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
      return d.age1;
    })])
    .range([height, 0]);
  
  var xAxis = d3.axisBottom(x);
  
  var yAxis = d3.axisLeft(y);
  
  var ordinalColorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  var yGridlines = d3.axisLeft(y)
    .tickSize(-width, 0, 0)
    .tickFormat("");
  
  var svg = d3.select("body").append("svg")
    .attr("id", "chart")
    .attr("width", w)
    .attr("height", h);
  
  var chart = svg.append("g")
    .classed("display", true)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
  chart.append("g")
    .call(yGridlines)
    .classed("gridline", true)
    .attr("transform", "translate(0,0)");
  
  chart.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .classed("bar", true)
    .attr("x", function(d, i) {
      return x(d.area) + 1;
    })
    .attr("y", function(d, i) {
      return y(d.age1);
    })
    .attr("height", function(d) {
      return height - y(d.age1);
    })
    .attr("width", function(d) {
      return x.bandwidth() - 1;
    })
    .style("fill", function(d, i) {
      return ordinalColorScale(i);
    });
  
  chart.selectAll(".bar-label")
    .data(data)
    .enter()
    .append("text")
    .classed("bar-label", true)
    .attr("x", function(d, i) {
      return x(d.area) + x.bandwidth();
    })
    .attr("dx", -30)
    .attr("y", function(d, i) {
      return y(d.age1);
    })
    .attr("dy", 18)
    .style("font-size", "12px")
    .text(function(d) {
      return d.age1;
    });
  
  chart.append("g")
    .classed("x axis", true)
    .attr("transform", "translate(" + 0 + "," + (height + 2) + ")")
    .call(xAxis)
    .selectAll("text")
    .classed("x-axis-label", true)
    .style("text-anchor", "start")
    .attr("dx", 8)
    .attr("dy", 10)
    .attr("transform", "rotate(45)")
    .style("font-size", "12px")
  
  chart.append("g")
    .classed("y axis", true)
    .attr("transform", "translate(-3,0)")
    .call(yAxis)
  
  //This is the y label
  chart.select(".y.axis")
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left / 2)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Unemployment Rate");
  
  //This is the x label
  chart.select(".x.axis")
    .append("text")
    .attr("x", 0)
    .attr("y", 0)
    .style("text-anchor", "middle")
    .attr("transform", "translate(" + width / 2 + ",80)")
    .text("Regions in Vietnam");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 0.95em;
    text-align: center;
  }
  
  #chart {
    background-color: #F5F2EB;
    border: 1px solid #CCC;
  }
  
  .bar {
    fill: purple;
    shape-rendering: crispEdges;
  }
  
  .bar-label {
    fill: #000;
    text-anchor: middle;
    font-size: 18px;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .gridline path,
  .gridline line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>