javascript - d3 轴和标签剪裁

Question

我有一个带有 y 轴和标签的 d3 条形图。 Y 轴刻度标签被剪裁到 Y 条的比例。如何在 Y 轴上使用相同的缩放比例但不剪裁刻度标签？ (请参阅轴底部的切碎零)

我还想在缩放绘图区域外的 x 轴上添加一个文本。显然我对这里的元素放置有些不理解。为此，我确实在 SVG 中留了一些边距空间，但它仍然将所有内容剪裁到 svg 元素中我的边距内的缩放区域。

这是一个 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);

如果有人感兴趣，这里是工作 JS。我最终重新定义了比例以包括边距......

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

您的 svg 被限制在没有边距的区域。也就是说，您将“w”和“h”定义为图表的大小，但创建的 svg 元素恰好是该大小。因此不能考虑边距。

尝试:

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

或类似的。