title: My d3.js Scales are not working
body: <p>I am new to d3.js and is currently making a simple bar chart in version 4. I understand the basic idea of a scale. The problem is whenever I reload my page, some of my bars on my bar chart are cut in half, or is moved all the way to the top(or bottom) this is my code. I want my bars to stay within the svg but if i were to put for example </p>
  
  <pre><code>.attr(height, function(d){ return yScale(d)]); 
  </code></pre>
  
  <p>It wont work. Any ideas? my code should be located on the bottom.</p>
  
  <pre><code>var data = [ 40,60,80,100,600,700];
  var height = 500, width = 500;  
  
  
  var canvas  = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height",height);
  
  
  var yScale = d3.scaleLinear()
             .domain([40, 700])
             .range([0,400]);
  
  
  var bars = canvas.selectAll("rect")
               .data(data)
               .enter()
               .append("rect")
                  .attr("width", 30)
                  .attr("height", function(d){ return   yScale(d)})
  
                  .attr("x", function(d,i){ return i * 35})
                  .attr("y", function(d) { return height - d});
  
  
  
  }
  </code></pre>
  
  <p>Output of image is here.</p>
  
  <p><a href="https://i.stack.imgur.com/sGJdV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGJdV.png" alt="enter image description here"></a></p>