d3軸和標籤剪輯

我有一個Y軸和標籤的d3 barplot。 Y軸刻度標籤被裁剪爲Y條的刻度。我如何在Y軸上使用相同的縮放比例，但不剪裁刻度標籤？（請參閱軸底部的切碎的零）d3軸和標籤剪輯

另外我想爲縮放的繪圖區域外的x軸添加一個文本。顯然，我不瞭解元素在這裏的位置。爲此，我在SVG中留下了一些空白空間，但仍然將所有內容剪切到svg元素邊緣內的縮放區域。

這裏有一個小提琴：

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

來源

2013-02-25 glyph

您的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-25 22:11:59 cmonkey

我最終重新定義了具有相同效果的規模，但是這是問題所在。謝謝。 – glyph 2013-02-25 22:32:32

你如何對NVD3做同樣的事情？ – SuperUberDuper 2017-02-17 10:22:59

d3軸和標籤剪輯

回答

相關問題