title: d3 axis and label clipping
body: <p>I have a d3 barplot with a y axis and label.  The Y axis tick labels are being clipped to the scale of the Y bars.  How can I use the same scaling on the Y axis but not clip the tick labels?  (see the chopped zero on the bottom of the axis) </p>
  
  <p>Also I'd like to add a text for the x axis outside the scaled plot region.  There's obviously something I'm not understanding about the placement of elements here.  I did leave some margin space in the SVG for that purpose but it's still clipping everything to the scaled area inside my margins in the svg element.</p>
  
  <p>Here's a fiddle :</p>
  
  <p><a href="http://jsfiddle.net/VY7k5/4/" rel="nofollow">http://jsfiddle.net/VY7k5/4/</a></p>
  
  <pre><code>var plotData = [{
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "1.1241",
      "fpkm_conf_lo": "0.898502",
      "fpkm_conf_hi": "1.34969",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "8.33",
      "cancerOriginTissue": "Colon",
      "cancer": "Rare Cancer\/Unknown"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "1.12666",
      "fpkm_conf_lo": "0.871059",
      "fpkm_conf_hi": "1.38226",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "16.67",
      "cancerOriginTissue": "Abdominal Wall",
      "cancer": "Perivascular Epithelioid Cell Tumor (PECOMA)"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "1.21305",
      "fpkm_conf_lo": "0.949369",
      "fpkm_conf_hi": "1.47674",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "25.00",
      "cancerOriginTissue": "Lung",
      "cancer": "Undifferentiated Malignant Neoplasm"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "1.98203",
      "fpkm_conf_lo": "1.64888",
      "fpkm_conf_hi": "2.31519",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "33.33",
      "cancerOriginTissue": "Cervix",
      "cancer": "Carcinoma, Neuroendocrine"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "2.24514",
      "fpkm_conf_lo": "1.83333",
      "fpkm_conf_hi": "2.65696",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "41.67",
      "cancerOriginTissue": "Testes",
      "cancer": "Mixed Germ Cell Cancer"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "2.29868",
      "fpkm_conf_lo": "2.02514",
      "fpkm_conf_hi": "2.57221",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "50.00",
      "cancerOriginTissue": "Head and Neck",
      "cancer": "Carcinoma, Sarcomatoid"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "2.61196",
      "fpkm_conf_lo": "2.28949",
      "fpkm_conf_hi": "2.93442",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "58.33",
      "cancerOriginTissue": "Thyroid",
      "cancer": "Rare Cancer\/Unknown"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "2.94397",
      "fpkm_conf_lo": "2.61962",
      "fpkm_conf_hi": "3.26832",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "66.67",
      "cancerOriginTissue": "Prostate",
      "cancer": "Adenocarcinoma"
  }, {
      "patient.id": "",
      "library_id": "",
      "sample_origin_site_search": null,
      "sample_cancer_search": null,
      "gene_id": "ENSG00000157554",
      "gene_short_name": "ERG",
      "locus": "21:39751948-40033704",
      "chr_id": "21",
      "start": "39751948",
      "end": "40033704",
      "fpkm": "3.27303",
      "fpkm_conf_lo": "2.79509",
      "fpkm_conf_hi": "3.75097",
      "fpkm_status": "OK",
      "fpkm_percentile_compendium": "75.00",
      "cancerOriginTissue": "Small Intestine",
      "cancer": false
  }];
  
  // var plotData = gecgData.children;
  
  //Width and height
  // var w = $('#GECGplot').width();
  // var h = $('#GECGplot').height();
  // var w = 700;
  // var h = 500;
  var barPadding = 1;
  var margin = {
      top: 40,
      right: 70,
      bottom: 20,
      left: 10
  };
  
  var w = 700 - margin.left - margin.right;
  var h = 500 - margin.top - margin.bottom;
  var barW = ((w - margin.left - margin.right) / (plotData.length));
  console.log('barW ' + barW);
  
  var y = d3.scale.linear().domain([0, d3.max(plotData, function (d, i) {
      return parseFloat(d.fpkm);
  })]).
  rangeRound([h, 0]);
  
  var ws = d3.scale.linear().domain([0, d3.max(plotData, function (d, i) {
      return plotData.length;
  })]).
  rangeRound([0, w]);
  
  //Create SVG element
  var svg = d3.select("#GECGplot")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
  
  svg.selectAll("rect")
  // .data(dataset)
  .data(plotData)
      .enter()
      .append("rect")
      .attr("x", function (d, i) {
      // alert(plotData.length);
      return i * (barW);
  })
      .attr("y", function (d, i) {
      // alert(plotData[i].fpkm);
      console.log('orig ' + d.fpkm + ' scaled: ' + y(d.fpkm))
      return y(parseFloat(d.fpkm));
  })
      .attr("width", (barW) - barPadding)
      .attr("height", function (d, i) {
      return h - y(parseFloat(d.fpkm));
  })
      .attr("fill", function (d, i) {
      console.log(d.library_id + ' -- SI_5485')
      if (d.library_id == 'SI_5485') return "rgb(0, 192, 0)";
      else return "rgb(192, 0, 0)";
  });
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("right")
      .ticks(4);
  
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + (w - margin.right) + ",0)")
      .call(yAxis);
  
  svg.append("text")
      .attr("class", "y label")
      .attr("text-anchor", "end")
      .attr("y", 6)
      .attr("dy", ".2em")
      .attr("transform", "translate(" + (w - (margin.right / 2)) + "," + (h / 2) + "), rotate(90)")
      .text("FPKM");
  
  
  svg.selectAll("text")
      .data(plotData)
      .enter()
      .append("text")
      .text(function (d, i) {
      return d.library_id;
  })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white")
      .attr("text-anchor", "middle")
      .attr("x", function (d, i) {
      return i * (barW) + (barW - barPadding) / 2;
  })
      .attr("y", function (d, i) {
      return y(parseFloat(d.fpkm)) + 20;
  })
  // alert(tableSchema);
  </code></pre>
  
  <p>Here's the working JS if anyone is interested. I ended up redefining the scale to include the margins... </p>
  
  <pre><code>var barPadding = 1; 
  var margin = {top: 5, right: 100, bottom: 5, left: 5};
  
  var w = $('#GECGplot').width();
  var wM = ($('#GECGplot').width() - margin.left - margin.right);
  var h = $('#GECGplot').height();
  var hM = ($('#GECGplot').height() - margin.top - margin.bottom);
  var barW = ( (w - margin.left - margin.right) / (plotData.length) );
  
  var y = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return parseFloat(d.fpkm); })]).
    rangeRound([(hM), 0]);
  
  var ws = d3.scale.linear().domain([0, d3.max(plotData, function(d, i) { return plotData.length; })]).
    rangeRound([0, (wM)]);
  
  //Create SVG element
  var svg = d3.select("#GECGplot")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  
  // make the  bars
  svg.selectAll("rect")
     .data(plotData)
     .enter()
     .append("rect")
     .attr("x", function(d, i) {
          return (i * barW);
      })
     .attr("y", function(d, i) {
          return y(parseFloat(d.fpkm));
      })
     .attr("width", (barW) - barPadding )
     .attr("height", function(d, i) {
          return (hM) - y(parseFloat(d.fpkm));
      })
     .attr("fill", function(d, i) {
          if (d.library_id == '&lt;?=$l?&gt;') return "rgb(0, 192, 0)";
          else return "rgb(192, 0, 0)";
      });
  
  // Y axis
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("right")
      .ticks(8);
  
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + (w-margin.right) + ",0)")
      .call(yAxis);
  
  // Y label
  svg.append("text")
      .attr("class", "y label")
      .attr("text-anchor", "middle")
      .attr("dy", ".1em")
      .attr("transform", "translate(" + (w-(margin.right/2)) + ","+(hM/2)+"), rotate(90)")
      .text("FPKM");
  
  // Legend header
  svg.append("text")
      .attr("class", "legend")
      .attr("text-anchor", "left")
      .attr("y", 10)
      .attr("dy", ".2em")
      .attr("transform", "translate(10,10), rotate(0)")
      .text("&lt;?= strtoupper($_REQUEST['gene_short_name']) ?&gt; expression - &lt;?= strtoupper($_REQUEST['library']) ?&gt; vs compendium");
  </code></pre>