Commit 1a12dd27 authored by Penom Nom's avatar Penom Nom
Browse files

Auto resize svg.

parent cc36cebc
......@@ -128,21 +128,31 @@ $(function () {
$(".tree-view-btn").click(function() {
//Set dialog window
$("#modal-label-tmpl").html("NG6 <small> " + $("#analyse_name").val() + "</small>");
$("#modal-body-tmpl").html("");
$("#modal-body-tmpl").html('<div id="d3_container"></div>');
$("#modal-foot-tmpl").html('<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>');
$("#d3_container").css('width', '845px');
$("#d3_container").css('height', '500px');
$("#ng6modal").css('width', 'auto');
$("#ng6modal").css('margin-left', '-435px');
//Retrieve values
var nb_terminal_nodes = null ;
var sample_name_max_length = 0 ;
linkage_data = null ;
$(":checked[id^=chk_sample_]").each(function(){
var index = $(this).attr("id").split("_")[2];
nb_terminal_nodes = $("#linkage_"+index).val().match(/\[\s*\]/g).length ;
linkage_data = $.parseJSON( $("#linkage_"+index).val() );
// Sample name max length
samples_names = $("#linkage_"+index).val().match(/\"name\"\s*:\s*\"[^\"]+"/g) ;
for( var i = 0 ; i < samples_names.length ; i++ ) {
sample_name_max_length = Math.max( sample_name_max_length, (samples_names[i].length - 10) ) ;
}
});
//Build chart
var width = "800" ;
var height = "550" ;
var width = getDepth(linkage_data) * 95 + (sample_name_max_length * 6) ; // nb_link * width_link + text_length
var height = 50 + nb_terminal_nodes * 30 ; //margin_top + nb_terminal_nodes + height_nodes
tree = null ;
diagonal = null ;
svg_layout = null ;
......@@ -154,7 +164,7 @@ $(function () {
diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
svg_layout = d3.select("#modal-body-tmpl").append("svg:svg")
svg_layout = d3.select("#d3_container").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
......@@ -168,6 +178,22 @@ $(function () {
//Display
$("#ng6modal").modal();
});
/**
* Return the object max depth.
*/
getDepth = function( obj ) {
var depth = 0;
if (obj.children) {
obj.children.forEach(function (d) {
var tmpDepth = getDepth(d)
if (tmpDepth > depth) {
depth = tmpDepth
}
})
}
return 1 + depth
}
function build_depth_histogram( container, scale_type ) {
//Retrieve values
......@@ -257,7 +283,7 @@ $(function () {
var nodes = tree.nodes(linkage_data).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
nodes.forEach(function(d) { d.y = d.depth * 100; });
// Update the nodes.
var node = svg_layout.selectAll("g.d3-node")
......
......@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<thead>
<tr>
<th><center><input type="checkbox" id="chk_all_sample"></center></th>
<th class="string-sort">Samples ({$analyse_results|@count})</th>
<th class="string-sort">Clustering ({$analyse_results|@count})</th>
<th class="numeric-sort">Count</th>
<th class="numeric-sort">Min depth</th>
<th class="numeric-sort">Lower quartile depth</th>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment