1

私はy軸とラベルを持つd3棒グラフを持っています。Y 軸の目盛りラベルは、Y バーのスケールにクリップされています。Y 軸で同じスケーリングを使用し、目盛りラベルをクリップしないようにするにはどうすればよいですか? (軸の下部にあるみじん切りゼロを参照)

また、スケーリングされたプロット領域の外側に x 軸のテキストを追加したいと思います。ここでの要素の配置について、私が理解していないことが明らかにあります。その目的のためにSVGにマージンスペースを残しましたが、svg要素のマージン内のスケーリングされた領域にすべてをクリップしています。

ここにフィドルがあります：

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

1 に答える 1

2

あなたの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);

または類似。

于 2013-02-25T22:11:59.493 に答える