d3 axis and label clipping

Question

I have a d3 barplot with ay 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)

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.

Here's a fiddle :

http://jsfiddle.net/VY7k5/4/

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);

Here's the working JS if anyone is interested. I ended up redefining the scale to include the margins...

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 == '<?=$l?>') 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("<?= strtoupper($_REQUEST['gene_short_name']) ?> expression - <?= strtoupper($_REQUEST['library']) ?> vs compendium");

Answer 1

Your svg is constrained to the area without the margins. That is, you define 'w' and 'h' as the size of your chart, but the svg element is created to exactly that size. So the margins can't be taken into account.

Try:

//Create SVG element
var svg = d3.select("#GECGplot")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom);

or similar.