title: D3 axis label has to be added separately?
body: <p>In <a href="https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e" rel="nofollow noreferrer">this axis label example</a>, which uses D3 v4, it adds the x axis and the text label as separate nodes under svg.</p>
  
  <pre><code>  // Add the x Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
  
    // text label for the x axis
    svg.append("text")             
        .attr("transform",
              "translate(" + (width/2) + " ," + 
                             (height + margin.top + 20) + ")")
        .style("text-anchor", "middle")
        .text("Date");
  </code></pre>
  
  <p>When I chain the code above (hence moving the text element under the x axis group):</p>
  
  <pre><code>  // Add the x Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .append("text")             
        .style("text-anchor", "middle")
        .text("Date");
  </code></pre>
  
  <p>Then my axis title is not visible any more (see screenshot below). I can still find my text element in DOM, under the x axis group, but it's not there in the rendered HTML.</p>
  
  <p><a href="https://i.stack.imgur.com/NmNUz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NmNUz.jpg" alt="enter image description here"></a></p>
  
  <p>I want to know:</p>
  
  <ol>
  <li><p>Is it by design that D3 wants me to add axis and its label separately (i.e., not chaining)?</p></li>
  <li><p>Why is my text element not visible after I move it under the x axis group? </p></li>
  </ol>