javascript - d3 Heatmap - zoom into selected area -
right recalculate points select on heatmap. relatively new @ d3 , don't particularly understand how zoom behavior works. can help? chunk of code allows me zoom heatmap self selected area:
function selectarea(area,svg,dataset,num,oldxstart,oldystart) { svg .attr("width",width) .attr("height",height) var cols = dataset.dim[1]; //x var rows = dataset.dim[0]; //y var zoomdat = []; var newxlab=[]; var newylab = []; //makes selection rectangles area .on("mousedown", function() { var e = this, origin = d3.mouse(e), rect = svg .append("rect") .attr("class", "zoom"); origin[0] = math.max(0, math.min(width, origin[0])); origin[1] = math.max(0, math.min(height, origin[1])); d3.select('body') .on("mousemove.zoomrect", function() { var m = d3.mouse(e); m[0] = math.max(0, math.min(width, m[0])); m[1] = math.max(0, math.min(height, m[1])); rect.attr("x", math.min(origin[0], m[0])) .attr("y", math.min(origin[1], m[1])) .attr("width", math.abs(m[0] - origin[0])) .attr("height", math.abs(m[1] - origin[1])); }) .on("mouseup.zoomrect", function() { var m = d3.mouse(e); m[0] = math.max(0, math.min(width, m[0])); m[1] = math.max(0, math.min(height, m[1])); //x,y start/finish selection of data => can draw box other way, , still work. var xstart = math.min(math.floor(origin[0]/xscale(1)), math.floor(m[0]/xscale(1))) var xfinish = math.max(math.floor(m[0]/xscale(1)), math.floor(origin[0]/xscale(1)))+1 var ystart = math.min(math.floor(origin[1]/yscale(1)), math.floor(m[1]/yscale(1))) var yfinish =math.max(math.floor(m[1]/yscale(1)), math.floor(origin[1]/yscale(1)))+1 var newcolmeta = []; var newrowmeta = []; var newydend = []; var newxdend = []; //if y dendrogram selected, make x dendrogram undefined //because dont want x dendrogram change if (num==1) { xstart = 0; xfinish = cols //if x dendrogram selected, make y dendrogram undefined //because dont want y dendrogram change } else if (num==2) { ystart = 0; yfinish = rows } //get data selected , send heatmapgrid (i = xstart; i<xfinish; i++) { newxlab.push(dataset.cols[i]); if (data.cols!=null) { //if there no column clustering newxdend.push(d3.select(".ends_x"+i).attr("id")) } } (i=ystart;i<yfinish; i++) { newylab.push(dataset.rows[i]); if (data.rows !=null) { //if there no row clustering newydend.push(d3.select(".ends_y"+i).attr("id")) } (j=xstart; j<xfinish; j++) { zoomdat.push(dataset.data[i*cols+j]); } } //get metadata -> if there more 1 line of annotations, data in different places, grid if (colmeta !=null) { (i = 0; i<colhead.length; i++) { (j = xstart; j<xfinish; j++) { newcolmeta.push(colmeta[i*cols+j]) } } colmeta = newcolmeta } if (rowmeta != null) { (i =0; i<rowhead.length; i++) { (j =ystart; j<yfinish; j++) { newrowmeta.push(rowmeta[i*rows+j]) } } rowmeta = newrowmeta } //set new parameters based on selected data dataset.dim[1] = newxlab.length; dataset.dim[0] = newylab.length; dataset.rows = newylab; dataset.cols = newxlab; dataset.data = zoomdat; colannote.data = colmeta; rowannote.data = rowmeta; //changes margin, if dimensions small enough if (dataset.dim[0] <=100) { marginleft=100; } if (dataset.dim[1] <=300) { margintop = 130; } xglobal.range([0,width-marginleft]) yglobal.range([0,height-margintop]) var x = xglobal(1); var y = yglobal(1); //this slows down program (remove()) d3.selectall('.rootdend').remove(); oldxstart += xstart oldystart += ystart //olsxstart + xstart because dendrogram translated heatmapgrid(el.select('svg.colormap'),dataset,oldxstart,oldystart); //new vertical dendrogram dendrogram(el.select('svg.rowdend'), data.rows, false, 250, height-margintop,newydend,oldystart,y); //new horizontal dendrogram dendrogram(el.select('svg.coldend'), data.cols, true, width-marginleft, 250,newxdend,oldxstart,x); //new annotation bar, if no annotations, don't drawannotate(el.select('svg.colannote'), colannote,false, width-marginleft,10); drawannotate(el.select('svg.rowannote'),rowannote,true,10,height-margintop); //zoomdat = []; //remove blue select rectangle rect.remove(); }); });
Comments
Post a Comment