title: How To Align Text Inside SVG In D3.js
body: <p>I created a visual data with bar chart but I'm having trouble aligning the text "Gross Domestic Product" and "Units: Billions of Dollars Seasonal Adjustment: Seasonally Adjusted, Annual Rate Notes: A Guide to the National Income and Product Accounts of the United States (NIPA) - (<a href="http://www.bea.gov/national/pdf/nipaguid.pdf" rel="nofollow noreferrer">http://www.bea.gov/national/pdf/nipaguid.pdf</a>)"</p>
  
  <p>As of now they are over lapping at the top:
  <a href="https://i.stack.imgur.com/u8fuh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u8fuh.png" alt="enter image description here"></a></p>
  
  <p>I want to align "Gross Domestic Product" at the top and "Units: Billions of Dollars Seasonal Adjustment: Seasonally Adjusted Annual Rate Notes: A Guide to the National Income and Product Accounts of the United States (NIPA) - (<a href="http://www.bea.gov/national/pdf/nipaguid.pdf" rel="nofollow noreferrer">http://www.bea.gov/national/pdf/nipaguid.pdf</a>)" at the bottom like 
  <a href="https://i.stack.imgur.com/eilNB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eilNB.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/cannelflow/nuwzxoz8/" rel="nofollow noreferrer">Here Is My Code Fiddle Link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
  
  //Fetch Data By .$getJSON Method
  $.getJSON(url, function (d) {
      var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
      ];
      var data = d.data;
      /*test data by
      console.log(data[0][0]);
      */
      //create Margin
      var margin = { top: 40, right: 20, bottom: 30, left: 50 },
          width = 960 - margin.left - margin.right,
          height = 600 - margin.top - margin.bottom;
      /*
         Define Min &amp; Max Data for Scale
      */
      console.log(d.description);
      var minDate = new Date(data[0][0]);
      var maxDate = new Date(data[d.data.length - 1][0]);
      /*
       test data by 
       console.log(minDate);
       console.log(maxDate);
      */
      /*
      define scale then followed by axis
      */
      // define x and y scales
      // define x and y scales
      var xScale = d3.time.scale().
          domain([minDate, maxDate]).
          range([0, width]);
      var yScale = d3.scale.linear().
          domain([0, d3.max(data, function (d) {
              return d[1];
          })]).
          range([height, 0]);
      // define x axis and y axis
      var xAxis = d3.svg.axis().
          scale(xScale).
          orient("bottom").
          ticks(d3.time.years, 5);
      var yAxis = d3.svg.axis().
          scale(yScale).
          orient("left").
          ticks(10, "");
      var thisDate = new Date(data[0][0]);
      /*
      Create Tooltip
      */
      var toolTip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function (d) {
            return ('&lt;strong&gt;$' + d[1].toLocaleString() + ' Billion&lt;/strong&gt;&lt;p&gt;' + thisDate.getFullYear() + ' - ' + monthNames[thisDate.getMonth()] + '&lt;/p&gt;');
        });
      /*
      create svg element then append height and width and g which act as a container
      */
      var svg = d3.select(".mainContainer").
        attr({
            "width": width + margin.right + margin.left,
            "height": height + margin.top + margin.bottom
        }).
      append("g").
        attr("transform", "translate(" + margin.left + "," + margin.right + ")");
  
      //call toolTip
      svg.call(toolTip);
      // Draw xAxis
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
      //Draw yAxis
      svg.append("g")
       .attr("class", "y axis")
       .call(yAxis)
     .append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", 6)
       .attr("dy", ".71em")
       .style("text-anchor", "end")
       .text("Gross Domestic Product, USA");
      /*
    create bar or bind data
    */
      //bind data
      svg.selectAll(".bar")
        .data(data)
     //enter data
      .enter().
          append("rect")
     //update data
        .attr("class", "bar")
        .attr("x", function (d) { return xScale(new Date(d[0])); })
        .attr("width", Math.ceil(width / data.length))
        .attr("y", function (d) { return yScale(d[1]); })
        .attr("height", function (d) { return height - yScale(d[1]); })
        .on('mouseover', toolTip.show)
        .on('mouseout', toolTip.hide);
      //add description on top and bottom of svg
      svg.
          attr("class", "title").
          append("text").
          html("Gross Domestic Product &lt;/br&gt;")
      svg.
          attr("class", "notes").
          append("text").
          text(d.description);
      
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color:antiquewhite;
  }
  body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .bar {
    fill: orange;
  }
  
  .bar:hover {
    fill: orangered ;
  }
  .d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
  }
  /* Creates a small triangle extender for the tooltip */
  .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
  }
  
  /* Style northward tooltips differently */
  .d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
  }
  .notes {
    font-size: 12px;
    font-family: sans-serif;
    color: steelblue;
    padding: 20px;
    text-align: center;
    vertical-align:bottom;
  }
  .title {
    font-size: 2.5em;
    font-family: sans-serif;
    color: steelblue;
    text-align: center;
    padding: 15px 0px 5px 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;D3-Zipline: GDP Bar Graph&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link href="../Content/bootstrap-theme.min.css" rel="stylesheet" /&gt;
      &lt;link href="../Content/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;script src="../Scripts/d3/d3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"&gt;&lt;/script&gt;
      &lt;link href="demo.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;div class="container-fluid text-center"&gt;
          &lt;br /&gt;&lt;br /&gt;
          &lt;svg class="mainContainer"&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;script src="../Scripts/jquery-2.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="demo.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>