title: Only part of y axis and no x-axis being displayed d3.js
body: <p>I am trying to create a bar chart and in the process I am trying to define the x and y axis. However, I could only see the part of the y-axis and the x-axis seems to be invisible. COuld you please point out as to where I could have gone wrong ?   </p>
  
  <p>
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Bar Chart&lt;/title&gt;
      &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="barchart"&gt;&lt;/div&gt;
      &lt;script&gt;
          var width = 600;
          var height = 500;
          var margin = 20;
  
          var svg = d3.select("#barchart").append("svg")
              .attr("width", width-margin)
              .attr("height", height-margin);
  
  
          var xScale = d3.scaleBand().range([0, width]).padding(0.1);
          var yScale = d3.scaleLinear().range([height, 0]);
  
          var g = svg.append("g")
              .attr("transform", "translate(" + 100 + "," + 100 + ")");
  
          var data1 = { "2011": 9, "2012": 12, "2013": 10, "2014": 8, "2015": 12 }
          data_ready = d3.entries(data1);
  
          xScale.domain(data_ready.map((function (d) { return d.key; })))
          yScale.domain([0, d3.max(data_ready, function (d) { return d.value; })])
  
          g.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(xScale));
  
          g.append("g")
              .call(d3.axisLeft(yScale))
  
  
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Tbb6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tbb6G.png" alt="enter image description here"></a></p>