title: Height of bars too large
body: <p>I am implementing d3 charts but bars of my chart are crossing the y axis means they are going out of my canvas.It seems like height is the problem. Dont know the reason.I have scale of y axis till 500 if any values is grater than 500 then that goes out of my canvas. But the scale are made by d3. So i cant manipulate the scale.This is my html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta content="utf-8" http-equiv="encoding"&gt;
  
      &lt;title&gt;D3&lt;/title&gt;
      &lt;!-- &lt;link rel="stylesheet" type="text/css" href="mystyle1.css" /&gt; --&gt;
  
      &lt;style&gt;
          body {
              color: #000;
          }
  
          .axis {
              font: 10px sans-serif;
          }
  
          .axis path,
          .axis line {
              fill: none;
              stroke: #000;
              shape-rendering: crispEdges;
          }
  
          .bar {
              fill: steelblue;
          }
  
          .bar:hover {
              fill: brown;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="123.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   var thisIsGlobal;
   &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;div id="chart"&gt;&lt;/div&gt;
  &lt;div align="center"&gt;
      From : &lt;input type="date" name="field1" id="field1" /&gt; To : &lt;input type="date" name="field2" id="field2" /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;input type="button" onclick="render(true)" value="Submit" /&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var jsonURL = 'avb.json';
  
      var myData = [];
      var fliterdata=[];
      var tempdata=[];
      var selectop="";
  
  function filterJSON(json, key, value) {
     var result = [];
    for (var foo in json) {
  
      if (json[foo][key] == value) {
        result.push(json[foo]);
  
  
      }
    }
    return result;
  }
  
  function selectValue(d){
     // console.log("before op",selectop );
    switch(selectop){
              case "01":
                  return d.val001;
                  break;
              case "02":
                  return d.val002;
                  break;
              case "03":
                  return d.val003;
                  break;
              case "04":
                  return d.val004;
                  break;
              case "05":
                  return d.val005;
                  break;
              default:
                  //console.log("default");
                  return d.val001;
          }
  
  
   }
  
      var margin = {
          top: 20,
          right: 0,
          bottom: 80,
          left: 40
      };
      var width = 500 - margin.left - margin.right;
      var height = 300 - margin.top - margin.bottom;
  
  
  
      var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
      var yScale = d3.scale.linear().range([height, 0]);
      var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
      var vAxis = d3.svg.axis().scale(yScale).orient('left');
      var tooltip = d3.select('body').append('div')
              .style('position', 'absolute')
              .style('background', '#f4f4f4')
              .style('padding', '5 15px')
              .style('border', '1px #333 solid')
              .style('border-radius', '5px')
              .style('opacity', 'o');
  
  //function getDates() {
    //      return [document.getElementById('field1').value, document.getElementById('field2').value];
    //  }
  
      function render(filterByDates) {
  
  
          d3.select('svg').remove();
  
          if (filterByDates) {
  
                  tempData=fliterdata;
                  console.log("before date fliter data", tempData);
              var date1 = new Date(document.getElementById('field1').value);
              var date2 = new Date(document.getElementById('field2').value);
  
              //date1 = new Date(date1 + " UTC");
              //date2 = new Date(date2 + " UTC");
  
              //date1 = new Date( date1.getTime() + (date1.getTimezoneOffset() * 60000));
              //date2 = new Date( date2.getTime() + (date2.getTimezoneOffset() * 60000));
  
  
              tempData = tempData.filter(function(d) {
                  console.log(date1,date2);
                //  alert(date1);
                  return d.date &gt;= date1 &amp;&amp; d.date &lt;= date2;
  
  
              });
                  console.log("After date fliter data", tempData);
          }
  
  
          xScale.domain(tempData.map(function(d) {
                      return d.date;
                  }).sort(function(a,b) {
                    return a &gt; b;
                  })
          );
  
          yScale.domain([0, d3.max(tempData, function(d) {
                  //console.log("selectValue(d)"  , selectValue(d));
                  //var cool=d.val00+selectop;
                  //console.log("cool",cool);
              return selectValue(d);
          })]);
  
          var svg = d3.select('#chart').append('svg')
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
          svg
  
  
                  .append('g')
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(hAxis)
                  .selectAll("text")
                  .style("text-anchor", "end")
                  .attr("dx", "-.8em")
                  .attr("dy", "-.55em")
                  .attr("transform", "rotate(-90)");
  
          svg
                  .append('g')
                  .attr("class", "yaxis")
                  .call(vAxis)
  
          svg
                  .selectAll(".bar") //makes bar
                  .data(tempData)
                  .enter().append("rect")
                  .attr("class", "bar")
                  .style("fill", "teal")
                  .attr("x", function(d) {
                      return xScale(d.date);
                  })
                  .attr("width", xScale.rangeBand())
                  .attr("y", function(d) {
  
  
                      return yScale(selectValue(d));
                  })
                  .attr("height", function(d) {
  
                      console.log("as", d.value);
                      return height - yScale(selectValue(d));
                  })
                  .on('mouseover', function(d) {
                      tooltip.transition()
                              .style('opacity', 1)
  
                      tooltip.html(d.value)
                              .style('left', (d3.event.pageX) + 'px')
                              .style('top', (d3.event.pagey) + 'px')
                      d3.select(this).style('opacity', 0.5)
                  })
                  .on('mouseout', function(d) {
                      tooltip.transition()
                              .style('opacity', 0)
                      d3.select(this).style('opacity', 1)
                  });
      }
  
      d3.json(jsonURL, function(data) {
  
          myData = data;
          myData.forEach(function(d) {
  
              d.date = new Date(d.date);
              d.value="";
  
              d.name = +d.name;
              console.log(d.date,"Gt date");
              d.date = new Date(d.date + " UTC");
              console.log(d.date,"localtimezone date");
          });
  
          //myData.data.sort();
          //console.log(,"hello j");
  
          //render(false,myData);
         // console.log(render);
          //copy from here 
  
          //tempData=myData;
  
  
           $("#listbox").on("click", function() {
  
  
  
  
              var key = $(this).val();
  
              var value=$('#listbox option:selected').text();
              console.log("tx:", value);
  
              selectop=String(key);
              selectop=selectop.slice(-2);
               console.log("mydata: ", myData);
               console.log("prod:",selectop );
  
              fliterdata=filterJSON(myData, key, value);
  
              console.log("fliterdata: ", fliterdata);
              tempData=fliterdata;
                      render(false);
  
  
  
  
          });
  
          //till here
      });
  &lt;/script&gt;
  
  &lt;label&gt; List of Tables : &lt;/label&gt;&lt;br&gt;
  &lt;form name="myform" id="myForm"&gt;
      &lt;div style="height: 30px; width: 50px;"&gt;
          &lt;select id="dropdown1"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;style&gt;
          #listbox {
              display: none;
          }
          #listbox {
              position: relative;
          }
      &lt;/style&gt;
  
      &lt;div style="margin-left: 150px; margin-top: -30px; height: auto;"&gt;
          &lt;select id="listbox", multiple&gt;&lt;/select&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My javascript</p>
  
  <pre><code>    $(document).ready(function() {
          $.ajax({
              url: "avb.json",
              dataType: "json",
              success: function(obj) {
                  console.log("obj--", obj)
                  var jsObject = obj;
                  var usedNames = [];
                  $('&lt;option&gt;', {
                      text: 'Select your Option',
                      value: '',
                      selected: 'selected',
                      disabled: 'disabled',
                      location: 'fixed'
                  }).appendTo('#dropdown1')
                  $.each(obj, function(key, value) {
                      if (usedNames.indexOf(value.name) == -1)  {
  
                          $("#dropdown1").append("&lt;option value=" + key + "&gt;" + value.name + "&lt;/option&gt;");
                          usedNames.push(value.name);
                          }
  
                  });
                  $('#dropdown1').change(function() {
  
                      $('#listbox').toggle(this.value != "");
  
  
  
  
                  });
  
         $('#dropdown1').change(function() {
  
                      $('#listbox').empty();
  
                      $('&lt;option&gt;', {
                          text: 'Select your List Option',
                          value: '',
                          selected: 'selected',
                          disabled: 'disabled'
                      }).appendTo('#listbox');
  
  
                      var selection = $('#dropdown1 :selected').text();
                      console.log("as".selection);
                      $.each(jsObject, function(index, value) {
                          console.log("%o",value)
                          if (value['name'] == selection) {
                              var optionHtml = '';
                              for (var i = 1; i &lt;=20; i++) {
                                  var attr = 'attr' + ('000' + i).substr(-3);
                                  var val = 'val' + ('000' + i).substr(-3);
                                  //optionHtml += '&lt;option value="' + attr + '" data-val="'+value[val]+'"&gt;' + value[attr] + '&lt;/option&gt;';
  
                                  if(value[val]){ optionHtml += '&lt;option value="' + attr + '" data-val="'+value[val]+'"&gt;' + value[attr] + '&lt;/option&gt;';  }
  
  
                              }
  
                              $("#listbox").css("width", "500px")
  
                              $("#listbox").css("height", "300px")
                              $('#listbox').append(optionHtml);
                              return false;
                          }
                          var selectedOption = $(this).find('option:selected');
                          console.log(selectedOption);
  
                      });
  
                  });
   }
      });
  });
  </code></pre>
  
  <p>My json</p>
  
  <pre><code>[ {
   "name": "ABC",
   "date": 1459461600000, 
  "attr001": "SIGN1",
   "val001": "7", 
  "attr002": "SIGN2",
   "val002": "7",
   "attr003": "SIGN3", 
  "val003": "100.00", 
  "attr004": "SIGN4", 
  "val004": "0" 
  }, 
  {
  "name": "ABC",
   "date": 1459461600000,
   "attr001": "SIGN1",
   "val001": "20", 
  "attr002": "SIGN2", 
  "val002": "70", 
  "attr003": "SIGN3", 
  "val003": "100.00",
   "attr004": "SIGN4",
   "val004": "50" 
   }, 
  
  
   { "name": "XYZ", 
  "date": 1459125900000, 
  "attr001": "VISSE1",
   "val001": "100", 
  "attr002": "VISSE2",
   "val002": "7",
   "attr003": "VISSE3",
   "val003": "300.00",
   "attr004": "VISSE4",
   "val004": "0"
   },
  
   { "name": "XYZ",
   "date": 1459461600000,
   "attr001": "VISSE1", 
  "val001": "50", 
  "attr002": "VISSE2",
   "val002": "70",
   "attr003": "VISSE3",
   "val003": "300.00",
   "attr004": "VISSE4",
   "val004": "0" },
  
  { "name": "XYZ", 
  "date": 1459461900000, 
  "attr001": "VISSE1",
  "val001": "300", 
  "attr002": "VISSE2",
   "val002": "10", 
  "attr003": "VISSE3", 
  "val003": "500.00",
   "attr004": "VISSE4",
   "val004": "0" } ]
  </code></pre>