Created
March 10, 2015 05:20
-
-
Save thirdknife/aa368151d48ae0a9f12b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * INTERACTIVE CHROMOSOME VISUALIZATION | |
| * opt : initialization options object | |
| * + target: REQUIRED | |
| * + segment: REQUIRED | |
| * | |
| * | |
| */ | |
| var d3 = require("d3"), d3tooltip = require('d3-tooltip'); | |
| var $ = require("jquery"); | |
| var ModelLoader = require("./model-loader"); | |
| var Selector = require("./selector.js"); | |
| d3.selection.prototype.tooltip = function(o, f) { | |
| var body, clipped, clipper, d, defaults, height, holder, optionsList, parent, positions, sets, voronois, width; | |
| if (arguments.length < 2) { | |
| f = o; | |
| } | |
| body = d3.select('body'); | |
| defaults = { | |
| type: "tooltip", | |
| text: "You need to pass in a string for the text value", | |
| title: "Title value", | |
| content: "Content examples", | |
| detection: "shape", | |
| placement: "fixed", | |
| gravity: "right", | |
| position: [100, 100], | |
| displacement: [0, 0], | |
| mousemove: false | |
| }; | |
| optionsList = []; | |
| voronois = []; | |
| this.each(function(d, i) { | |
| var opt; | |
| opt = f.apply(this, arguments); | |
| optionsList.push(opt); | |
| if (opt.detection === 'voronoi') { | |
| return voronois.push([opt, i]); | |
| } | |
| }); | |
| if (voronois.length !== 0) { | |
| parent = d3.select(this[0][0].ownerSVGElement); | |
| holder = parent.append("g").attr("id", "__clip__holder__"); | |
| console.log(voronois); | |
| positions = (function() { | |
| var _i, _len, _results; | |
| _results = []; | |
| for (_i = 0, _len = voronois.length; _i < _len; _i++) { | |
| d = voronois[_i]; | |
| _results.push(d[0].position); | |
| } | |
| return _results; | |
| })(); | |
| console.log(positions); | |
| sets = d3.geom.voronoi(positions); | |
| height = parent.attr("height"); | |
| width = parent.attr("width"); | |
| clipper = d3.geom.polygon([[0, 0], [0, height], [width, height], [width, 0]]).clip; | |
| clipped = positions.map(clipper); | |
| holder.append("g").attr("id", "clipPaths").selectAll("clipPath").data(voronois).enter().append("clipPath").attr("id", function(d, i) { | |
| return "clip-" + i; | |
| }).append("circle").attr("cx", function(d) { | |
| return d[0].position[0]; | |
| }).attr("cy", function(d) { | |
| return d[0].position[1]; | |
| }).attr("r", function(d) { | |
| return 20; | |
| }); | |
| holder.append("g").attr("id", "clipped").selectAll("path").data(voronois).enter().append("path").attr("d", function(d, i) { | |
| return "M" + (clipped[i].join('L')) + "Z"; | |
| }).attr("clip-path", function(d, i) { | |
| return "url(#clip-" + i + ")"; | |
| }); | |
| } | |
| return this.each(function(d, i) { | |
| var el, move_tip, options; | |
| options = optionsList[i]; | |
| el = d3.select(this); | |
| move_tip = function(selection) { | |
| var center, offsets; | |
| center = [0, 0]; | |
| if (options.placement === "mouse") { | |
| center = d3.mouse(body.node()); | |
| } else { | |
| offsets = this.ownerSVGElement.getBoundingClientRect(); | |
| center[0] = offsets.left; | |
| center[1] = offsets.top; | |
| center[0] += options.position[0]; | |
| center[1] += options.position[1]; | |
| center[0] += window.scrollX; | |
| center[1] += window.scrollY; | |
| } | |
| center[0] += options.displacement[0]; | |
| center[1] += options.displacement[1]; | |
| return selection.style("left", "" + center[0] + "px").style("top", "" + center[1] + "px").style("display", "block"); | |
| }; | |
| el.on("mouseover", function() { | |
| var inner, tip; | |
| tip = body.append("div").classed(options.type, true).classed(options.gravity, true).classed('fade', true).style("display", "none"); | |
| if (options.type === "tooltip") { | |
| tip.append("div").html(options.text).attr("class", "tooltip-inner"); | |
| } | |
| if (options.type === "popover") { | |
| inner = tip.append("div").attr("class", "popover-inner"); | |
| inner.append("h3").text(options.title).attr("class", "popover-title"); | |
| inner.append("div").attr("class", "popover-content").append("p").html(options.content[0][0].outerHTML); | |
| } | |
| tip.append("div").attr("class", "arrow"); | |
| setTimeout(function() { | |
| return tip.classed('in', true); | |
| }, 10); | |
| return tip.style("display", "").call(move_tip.bind(this)); | |
| }); | |
| if (options.mousemove) { | |
| el.on("mousemove", function() { | |
| return d3.select("." + options.type).call(move_tip.bind(this)); | |
| }); | |
| } | |
| return el.on("mouseout", function() { | |
| var tip; | |
| tip = d3.selectAll("." + options.type).classed('in', false); | |
| return setTimeout(function() { | |
| return tip.remove(); | |
| }, 150); | |
| }); | |
| }); | |
| }; | |
| var Chromosome = (function () { | |
| "use strict"; | |
| var chr = function (opt) { | |
| var self = this, | |
| CHR1_BP_END = 248956422, | |
| STALK_MAG_PC = 0.8, | |
| PADDING = 30, | |
| LABEL_PADDING = 24, | |
| AXIS_SPACING = 4, | |
| STALK_SPACING = 3; | |
| var genes_chr_12 = [{"ChrLocation":"p","MemberName":"VAMP1"},{"ChrLocation":"p11.23","MemberName":"KCNJ8"},{"ChrLocation":"p13.31","MemberName":"ING4"},{"ChrLocation":"q","MemberName":"SLC38A2"},{"ChrLocation":"q","MemberName":"PLEKHA9"},{"ChrLocation":"q","MemberName":"CHST11"},{"ChrLocation":"q","MemberName":"SOCS2"},{"ChrLocation":"q11","MemberName":"ITGA5"},{"ChrLocation":"q12","MemberName":"ACCN2"},{"ChrLocation":"q12","MemberName":"RND1"},{"ChrLocation":"q12","MemberName":"PRKAG1"},{"ChrLocation":"q12","MemberName":"DHH"},{"ChrLocation":"q13","MemberName":"ITGA7"},{"ChrLocation":"q13","MemberName":"CDK2"},{"ChrLocation":"q13","MemberName":"PDE1B"},{"ChrLocation":"q13","MemberName":"SLC38A4"},{"ChrLocation":"q13","MemberName":"CACNB3"},{"ChrLocation":"q13","MemberName":"KCNH3"},{"ChrLocation":"q13","MemberName":"MYO1A"},{"ChrLocation":"q13","MemberName":"ZNFN1A4"},{"ChrLocation":"q13","MemberName":"NFE2"},{"ChrLocation":"q13","MemberName":"IGFBP6"},{"ChrLocation":"q13","MemberName":"ERBB3"},{"ChrLocation":"q13","MemberName":"SLC4A8"},{"ChrLocation":"q13.1","MemberName":"INHBC"},{"ChrLocation":"q13.1","MemberName":"SP1"},{"ChrLocation":"q13.1","MemberName":"RAPGEF3"},{"ChrLocation":"q13.1","MemberName":"HDAC7"},{"ChrLocation":"q13.1","MemberName":"TMEM106C"},{"ChrLocation":"q13.1","MemberName":"HNRNPA1"},{"ChrLocation":"q13.11","MemberName":"SLC38A1"},{"ChrLocation":"q13.11","MemberName":"COL2A1"},{"ChrLocation":"q13.12","MemberName":"FMNL3"},{"ChrLocation":"q13.12","MemberName":"FKBP11"},{"ChrLocation":"q13.13","MemberName":"CBX5"},{"ChrLocation":"q13.13","MemberName":"CALCOCO1"},{"ChrLocation":"q13.13","MemberName":"ZNF385A"},{"ChrLocation":"q13.13","MemberName":"TENC1"},{"ChrLocation":"q13.13","MemberName":"ITGB7"},{"ChrLocation":"q13.13","MemberName":"ATP5G2"},{"ChrLocation":"q13.2","MemberName":"GLI1"},{"ChrLocation":"q13.2","MemberName":"PPP1R1A"},{"ChrLocation":"q13.2","MemberName":"NEUROD4"},{"ChrLocation":"q13.2","MemberName":"MYL6"},{"ChrLocation":"q13.2","MemberName":"ORMDL2"},{"ChrLocation":"q13.3","MemberName":"INHBE"},{"ChrLocation":"q13.3","MemberName":"BAZ2A"},{"ChrLocation":"q13.3","MemberName":"NXPH4"},{"ChrLocation":"q14","MemberName":"OSBPL8"},{"ChrLocation":"q14","MemberName":"CDK4"}]; | |
| var genes_chr_7 = [{"ChrLocation":"p11.1","MemberName":"FKBP9"},{"ChrLocation":"p11.2","MemberName":"CCT6A"},{"ChrLocation":"p12","MemberName":"EGFR"},{"ChrLocation":"p12.2","MemberName":"GRB10"},{"ChrLocation":"p12.3","MemberName":"TNS3"},{"ChrLocation":"p13","MemberName":"GLI3"},{"ChrLocation":"p13-p11.1","MemberName":"ZNFN1A1"},{"ChrLocation":"p13-p11.2","MemberName":"MYO1G"},{"ChrLocation":"p13-p12","MemberName":"IGFBP1"},{"ChrLocation":"p14.3","MemberName":"PDE1C"},{"ChrLocation":"p14.3-p14.1","MemberName":"SCRN1"},{"ChrLocation":"p15","MemberName":"SP4"},{"ChrLocation":"p15-p13","MemberName":"INHBA"},{"ChrLocation":"p15-p14","MemberName":"NFE2L3"},{"ChrLocation":"p15.2","MemberName":"CBX3"},{"ChrLocation":"p15.3","MemberName":"ITGB8"},{"ChrLocation":"p21-p11.2","MemberName":"MYL7"},{"ChrLocation":"p21.1","MemberName":"SNX13"},{"ChrLocation":"p21.2","MemberName":"SP8"},{"ChrLocation":"p21.3","MemberName":"TMEM106B"},{"ChrLocation":"p22","MemberName":"CHST12"},{"ChrLocation":"q11.23","MemberName":"CLIP2"},{"ChrLocation":"q21","MemberName":"FZD1"},{"ChrLocation":"q21-q22","MemberName":"CDK6"},{"ChrLocation":"q21.3","MemberName":"PDK4"},{"ChrLocation":"q22.1","MemberName":"COL1A2"},{"ChrLocation":"q31","MemberName":"ING3"},{"ChrLocation":"q31.32","MemberName":"RNF133"},{"ChrLocation":"q31.33","MemberName":"RNF148"},{"ChrLocation":"q32.1","MemberName":"METTL2B"},{"ChrLocation":"q34","MemberName":"ATP6V0A4"},{"ChrLocation":"q35","MemberName":"ACCN3"},{"ChrLocation":"q35-q36","MemberName":"SLC4A2"},{"ChrLocation":"q36","MemberName":"SHH"},{"ChrLocation":"q36.1","MemberName":"PRKAG2"}] | |
| var genes_chr_2 = [{"ChrLocation":"q13","MemberName":"INHBB"},{"ChrLocation":"p11.2","MemberName":"VAMP5"},{"ChrLocation":"p12-p11.2","MemberName":"VAMP8"},{"ChrLocation":"p13","MemberName":"SLC4A5"},{"ChrLocation":"p13.2","MemberName":"CCT7"},{"ChrLocation":"p15","MemberName":"CCT4 "},{"ChrLocation":"p21","MemberName":"ABCG5"},{"ChrLocation":"p23","MemberName":"SLC5A6"},{"ChrLocation":"p23-p22","MemberName":"SNX17"},{"ChrLocation":"p23.2","MemberName":"CLIP4"},{"ChrLocation":"q11.2","MemberName":"CHST10"},{"ChrLocation":"q12-q34","MemberName":"MYO1B"},{"ChrLocation":"q14-q32","MemberName":"COL5A2"},{"ChrLocation":"q22-q23","MemberName":"CACNB4"},{"ChrLocation":"q22-q24","MemberName":"GRB14"},{"ChrLocation":"q22.1","MemberName":"NXPH2"},{"ChrLocation":"q23-q24","MemberName":"SLC4A10"},{"ChrLocation":"q23.3","MemberName":"RND3"},{"ChrLocation":"q24.1","MemberName":" KCNJ3"},{"ChrLocation":"q24.2","MemberName":"ITGB6"},{"ChrLocation":"q24.3","MemberName":"SLC38A11"},{"ChrLocation":"q31","MemberName":"COL3A1"},{"ChrLocation":"q31-q32","MemberName":"ITGAV"},{"ChrLocation":"q31-q32.1","MemberName":"OSBPL6"},{"ChrLocation":"q31.1","MemberName":"ATP5G3"},{"ChrLocation":"q31.2","MemberName":"HNRNPA3"},{"ChrLocation":"q31.2-q31.3","MemberName":"ZNF385B"},{"ChrLocation":"q31.3","MemberName":"PPP1R1C"},{"ChrLocation":"q32","MemberName":"ORMDL1"},{"ChrLocation":"q32.1","MemberName":"PDE1A"},{"ChrLocation":"q33","MemberName":"FZD7"},{"ChrLocation":"q33-q34","MemberName":"IGFBP2"},{"ChrLocation":"q33-q35","MemberName":"IHH"},{"ChrLocation":"q33.2","MemberName":"CDK15"},{"ChrLocation":"q33.3","MemberName":"FZD5"},{"ChrLocation":"q33.3-q34","MemberName":"ERBB4"},{"ChrLocation":"q34","MemberName":"ABCA12"},{"ChrLocation":"q34-q36","MemberName":"CRYBA2"},{"ChrLocation":"q35","MemberName":"ACCN4"},{"ChrLocation":"q35-q36","MemberName":"TNS1"},{"ChrLocation":"q36","MemberName":"SLC4A3"},{"ChrLocation":"q36-q37.1","MemberName":"RAMP1"},{"ChrLocation":"q37.3","MemberName":"HDAC4"},{"ChrLocation":"qter","MemberName":"ZNFN1A2"}] | |
| var genes_chr_17 = [{"ChrLocation":"p11.2","MemberName":" KCNJ12"},{"ChrLocation":"p13","MemberName":"ITGAE"},{"ChrLocation":"p13.1","MemberName":"VAMP2"},{"ChrLocation":"p13.2","MemberName":"RNF167"},{"ChrLocation":"p13.3","MemberName":"MYO1C"},{"ChrLocation":"q11-q12","MemberName":"MYO1D"},{"ChrLocation":"q11.2","MemberName":"CRYBA1"},{"ChrLocation":"q12","MemberName":"ACCN1"},{"ChrLocation":"q12-q21.1","MemberName":"IGFBP4"},{"ChrLocation":"q21","MemberName":"ZNFN1A3"},{"ChrLocation":"q21-q22","MemberName":"SLC4A1"},{"ChrLocation":"q21-qter","MemberName":"MYL4"},{"ChrLocation":"q21.1","MemberName":"ERBB2"},{"ChrLocation":"q21.2","MemberName":"FKBP10"},{"ChrLocation":"q21.3","MemberName":"NFE2L1"},{"ChrLocation":"q21.31","MemberName":"TMEM106A"},{"ChrLocation":"q21.32","MemberName":"ITGB3"},{"ChrLocation":"q21.33","MemberName":"COL1A1"},{"ChrLocation":"q22","MemberName":"RNF43"},{"ChrLocation":"q22-qter","MemberName":"CDK3"},{"ChrLocation":"q23.2","MemberName":"METTL2A"},{"ChrLocation":"q23.3","MemberName":"KCNH6"},{"ChrLocation":"q24","MemberName":"ABCA8"},{"ChrLocation":"q24.2","MemberName":"ABCA9"},{"ChrLocation":"q24.3","MemberName":"ABCA5"},{"ChrLocation":"q25","MemberName":"ITGB4"},{"ChrLocation":"q25.3","MemberName":"CBX2"}] | |
| var groupBands = function( array , f ) | |
| { | |
| var groups = {}; | |
| array.forEach( function( o ) | |
| { | |
| var group = JSON.stringify( f(o) ); | |
| groups[group] = groups[group] || []; | |
| groups[group].push( o ); | |
| }); | |
| return groups; | |
| } | |
| var xspacer = 0; | |
| var _options = (function () { | |
| return $.extend({}, { | |
| //DEFAULT OPTIONS | |
| dasSource : "http://www.ensembl.org/das/Homo_sapiens.GRCh38.karyotype", | |
| width: 900, | |
| height: 20, | |
| relativeSize: false, | |
| includeAxis: false, | |
| selectionMode: "single" | |
| }, opt || {}); | |
| }()); | |
| var _modelLoader = new ModelLoader({ | |
| source: _options.dasSource, | |
| segment: _options.segment | |
| }); | |
| var _model, _xscale; | |
| this.selectors = { | |
| selectorList: new Array(), | |
| deleteAll: function () { | |
| for (var i = 0; i < this.selectorList.length; i++) { | |
| this.selectorList[i].delete(); | |
| } | |
| this.selectorList.length = 0; | |
| }, | |
| getSelections: function () { | |
| var list = new Array(); | |
| for (var i = 0; i < this.selectorList.length; i++) | |
| { | |
| list.push(this.selectorList[i].getSelectedCoords()); | |
| } | |
| return list; | |
| } | |
| }; | |
| this.info = function () { | |
| return _options; | |
| }; | |
| this.getCoordsByBand = function (band) { | |
| var ret = []; | |
| if (typeof _model !== 'undefined') { | |
| for (var i = 0; i < _model.bands.length; i++) { | |
| if (band == _model.bands[i].id) { | |
| ret = [+_model.bands[i].START.textContent, +_model.bands[i].END.textContent]; | |
| break; | |
| } | |
| } | |
| } | |
| return ret; | |
| }; | |
| this.moveSelectorTo = function (to, from) { | |
| if (_options.selectionMode!=="none") { | |
| self.selectors.selectorList[0].move(to, from); | |
| } | |
| }; | |
| this.getCurrentSelections = function () { | |
| return self.selectors.getSelections(); | |
| }; | |
| this.deleteSelectors = function () { | |
| self.selectors.deleteAll(); | |
| } | |
| function newSelector(xscale, start, end, yshift) { | |
| return new Selector({ | |
| xscale: xscale, | |
| y: yshift, | |
| target: _options.target | |
| }).init(start, end) | |
| .on("selectionChanged", function (e) { | |
| e.segment = _options.segment; | |
| self.trigger("selectionChanged", e); | |
| }); | |
| }; | |
| this.addSelector = function (start, end, yshift) { | |
| self.selectors.selectorList.push(newSelector(_xscale, start, end, yshift).draw()); | |
| } | |
| this.draw = function () { | |
| console.log(_options); | |
| switch(_options.segment){ | |
| case '2': | |
| var _bands = groupBands(genes_chr_2,function(item){return [item.ChrLocation]}); | |
| break; | |
| case '7': | |
| var _bands = groupBands(genes_chr_7,function(item){return [item.ChrLocation]}); | |
| break; | |
| case '12': | |
| var _bands = groupBands(genes_chr_12,function(item){return [item.ChrLocation]}); | |
| break; | |
| case '17': | |
| var _bands = groupBands(genes_chr_17,function(item){return [item.ChrLocation]}); | |
| break; | |
| } | |
| _modelLoader.loadModel(function (model) { | |
| console.log(model); | |
| _model = model; | |
| var band,g; | |
| var lastStart, lastEnd; | |
| if (typeof model.err === 'undefined') { | |
| $(function () { | |
| var rangeTo = _options.relativeSize | |
| ? ((+model.stop / CHR1_BP_END) * _options.width) - PADDING | |
| : _options.width - PADDING; | |
| _xscale = d3.scale.linear() | |
| .domain([model.start, model.stop]) | |
| .range([0, rangeTo]); | |
| var bandGenes = function(d){ | |
| var string = ''; | |
| if(_bands['["'+d.id+'"]']){ | |
| _bands['["'+d.id+'"]'].forEach( function( o ) | |
| { | |
| string += '<button type="button" class="btn btn-default" data-toggle="popover" title="Popover title" data-content="And heres some amazing content. Its very engaging. Right?">'+o.MemberName+'</button>'; | |
| }); | |
| } | |
| return string; | |
| } | |
| var checkBands = function(d){ | |
| if(_bands['["'+d.id+'"]']) | |
| return true; | |
| else | |
| return false; | |
| } | |
| var pfirst,qfirst = 0; | |
| var lineFunction = d3.svg.line() | |
| .x(function(d) { return d.x; }) | |
| .y(function(d) { return d.y; }) | |
| .interpolate("linear"); | |
| var drawGenes = function(d){ | |
| if(checkBands(d)){ | |
| var inc = 0; | |
| var xrect = 0; | |
| var currBand = []; | |
| _bands['["'+d.id+'"]'].forEach( function( o ) | |
| { | |
| var lineData = []; | |
| console.log('Band: '+d.id); | |
| console.log('Last Start value: '+lastStart); | |
| console.log('Last End value: '+lastEnd); | |
| console.log('Current Start value: '+_xscale(d.START.textContent)); | |
| console.log('Current End Value: '+(_xscale(d.START.textContent)+70)); | |
| console.log(d.id.charAt(0)) | |
| if(!currBand[d.id] == 1){ | |
| currBand[d.id] = 1 | |
| } | |
| if (d.id.charAt(0) == 'p'){ | |
| if(pfirst == 0){ | |
| lastStart, lastEnd = undefined; | |
| } | |
| pfirst++; | |
| if((_xscale(d.START.textContent)) < lastStart && (_xscale(d.START.textContent)+70) > lastStart){ | |
| xrect = lastStart - 70 - 10; | |
| console.log('in p with overlap from left') | |
| }else if((_xscale(d.START.textContent)) > lastStart && (_xscale(d.START.textContent)) > lastEnd){ | |
| xrect = lastStart - 70 - 10; | |
| console.log('in p with extreme right') | |
| }else{ | |
| if(xrect == _xscale(d.START.textContent)){ | |
| xrect = _xscale(d.START.textContent); | |
| }else if(xrect == 0){ | |
| xrect = _xscale(d.START.textContent) | |
| }else{ | |
| } | |
| console.log('in p as is') | |
| } | |
| } | |
| else{ | |
| if(qfirst == 0){ | |
| lastStart, lastEnd = undefined; | |
| } | |
| qfirst++; | |
| if((_xscale(d.START.textContent)) < lastEnd && (_xscale(d.START.textContent)+70) > lastEnd){ | |
| xrect = lastEnd + 10; | |
| console.log('in q with overlap from right') | |
| }else if((_xscale(d.START.textContent)) < lastStart && (_xscale(d.START.textContent)) < lastEnd && currBand[d.id] == 1){ | |
| xrect = lastEnd + 10; | |
| currBand[d.id] = currBand[d.id] + 1; | |
| console.log('in q with extreme left') | |
| }else{ | |
| if(xrect == _xscale(d.START.textContent)){ | |
| xrect = _xscale(d.START.textContent); | |
| }else if(xrect == 0){ | |
| xrect = _xscale(d.START.textContent) | |
| }else{ | |
| } | |
| console.log('in q as is') | |
| } | |
| } | |
| console.log(currBand); | |
| console.log('--------------------------------'); | |
| var rectangle = band.append("rect") | |
| .attr("x", xrect) | |
| .attr("y", 90+inc) | |
| .attr("width", 70) | |
| .attr("height", 30) | |
| .tooltip(function(d, i) { | |
| var r, svg; | |
| svg = d3.select(this); | |
| g = svg.append("g"); | |
| g.append("text").text(o.MemberName).attr("dy", "25"); | |
| return { | |
| type: "popover", | |
| content : svg, | |
| detection: "shape", | |
| placement: "mouse", | |
| gravity: "right", | |
| displacement: [0, 0], | |
| mousemove: false | |
| }; | |
| }); | |
| band.append("text") | |
| .attr("x", xrect+15) | |
| .attr("y", 108+inc) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "12px") | |
| .attr("fill", "white") | |
| .text(o.MemberName); | |
| band.append("line") | |
| .style('stroke', "black") | |
| .attr("x1", _xscale(d.START.textContent) ) | |
| .attr("y1", 50) | |
| .attr("x2", xrect + 30) | |
| .attr("y2", 80 ) | |
| /*lineData.push({ x: xrect, y: 10 }); | |
| band.append("path") | |
| .attr("d", lineFunction(lineData)) | |
| .attr("stroke", "blue") | |
| .attr("stroke-width", 2) | |
| .attr("fill", "none");*/ | |
| inc += 32; | |
| xspacer = (_xscale(d.START.textContent)+ 90); | |
| lastStart = xrect; | |
| lastEnd = (xrect+70); | |
| // lastStart = xrect; | |
| // lastEnd = xrect+70; | |
| }); | |
| return true; | |
| } | |
| return false; | |
| } | |
| var visTarget = d3.select(_options.target) | |
| .attr('width', _options.width) | |
| .attr('height', _options.height + (10 * PADDING)); | |
| if (!visTarget.empty()) { | |
| band = visTarget.selectAll(_options.target + " g") | |
| .data(model.bands) | |
| .enter().append("g"); | |
| band.append("line") | |
| .style('stroke', "black") | |
| .attr("x1", 0 ) | |
| .attr("y1", 0 ) | |
| .attr("x2", 0 ) | |
| .attr("y2", function(d) { return drawGenes(d) ? 90 : 0 } ); | |
| /* | |
| band.append("line") | |
| .style('stroke', "black") | |
| .attr("x1", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) - 50 : 0 } ) | |
| .attr("y1", function(d) { return checkBands(d) ? 80 : 0 } ) | |
| .attr("x2", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) + 50 : 0 } ) | |
| .attr("y2", function(d) { return checkBands(d) ? 80 : 0 } ); | |
| band.append("line") | |
| .style('stroke', "black") | |
| .attr("x1", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) - 50 : 0 } ) | |
| .attr("y1", function(d) { return checkBands(d) ? 80 : 0 } ) | |
| .attr("x2", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) - 50 : 0 } ) | |
| .attr("y2", function(d) { return checkBands(d) ? 90 : 0 } ); | |
| band.append("line") | |
| .style('stroke', "black") | |
| .attr("x1", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) + 50 : 0 } ) | |
| .attr("y1", function(d) { return checkBands(d) ? 80 : 0 } ) | |
| .attr("x2", function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) + 50 : 0 } ) | |
| .attr("y2", function(d) { return drawGenes(d) ? 90 : 0 } ); | |
| */ | |
| /*band.append("foreignObject") | |
| .attr("width", 120) | |
| .attr("height", 400) | |
| .attr('y', function(d) { return checkBands(d) ? 100 : 0 }) | |
| .attr('x', function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) - 40 : 0 } ) | |
| .append("xhtml:body") | |
| .html(function(d){return checkBands(d) ? bandGenes(d) : ''; }) | |
| .tooltip(function(d, i) { | |
| var r, svg; | |
| svg = d3.select(document.createElement("svg")).attr("height", 50); | |
| r = 20; | |
| g = svg.append("g"); | |
| g.append("rect").attr("width", r * 10).attr("height", 10); | |
| g.append("text").text("10 times the radius of the cirlce").attr("dy", "25"); | |
| return { | |
| type: "tooltip", | |
| text: "Tip for circle of radius " + r, | |
| detection: "shape", | |
| placement: "fixed", | |
| gravity: "right", | |
| position: [10, 10], | |
| displacement: [r+2, -20], | |
| mousemove: false | |
| }; | |
| }); | |
| */ | |
| /*band.append('text') | |
| .text(function(d){return bandGenes(d); }) | |
| .style('stroke', "black") | |
| .attr('y', function(d) { return checkBands(d) ? 100 : 0 }) | |
| .attr('x', function(d) { return checkBands(d) ? ((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2) - 15 : 0 } )*/ | |
| //.attr("transform", function(d) { | |
| //return "rotate(90 "+((_xscale(d.START.textContent)+_xscale(d.END.textContent))/2)+10+","+90+")" | |
| // }); | |
| band.append('rect') | |
| .attr('class', function (m) { | |
| return m.TYPE.id.replace(':', ' '); | |
| }) | |
| .attr('height', function (m) { | |
| return (m.TYPE.id === "band:stalk") ? (_options.height * STALK_MAG_PC) : _options.height; | |
| }) | |
| .attr('width', function (m) { | |
| return _xscale(+m.END.textContent) - _xscale(+m.START.textContent); | |
| }) | |
| .attr('x', function (m) { | |
| return _xscale(m.START.textContent); | |
| }) | |
| .attr('y', function (m) { | |
| return (m.TYPE.id === "band:stalk") ? (PADDING + STALK_SPACING) : PADDING; | |
| }); | |
| var label = visTarget.append("text") | |
| .attr("class", "band-lbl") | |
| .attr("y", LABEL_PADDING); | |
| band.on("mouseover", function (m) { | |
| label.text(m.id) | |
| .attr('x', (_xscale(m.START.textContent))); | |
| }); | |
| band.on("click", function (m) { | |
| var start = +m.START.textContent, | |
| end = +m.END.textContent; | |
| if ((_options.selectionMode!=="none" && self.selectors.selectorList.length == 0) || | |
| (_options.selectionMode === "multi" && d3.event.shiftKey)) { | |
| self.addSelector(start,end, (PADDING - AXIS_SPACING)) | |
| } | |
| if(_options.selectionMode === "single") { | |
| self.selectors.selectorList[0].move(start, end); | |
| } | |
| self.trigger("bandSelection", { | |
| segment: _options.segment, | |
| bandID: m.id, | |
| type: m.TYPE.textContent, | |
| start: start, | |
| end: end | |
| }); | |
| }); | |
| if (_options.includeAxis) { | |
| var bpAxis = d3.svg.axis() | |
| .scale(_xscale) | |
| .tickFormat(d3.format('s')) | |
| .orient("bottom"); | |
| visTarget.append('g') | |
| .attr('class', 'bp-axis') | |
| .attr('transform', 'translate(0,' + (_options.height + PADDING + AXIS_SPACING) + ")") | |
| .call(bpAxis); | |
| } | |
| } else { | |
| //No html target set | |
| console.log("cyto-Chromosome: invalid html target handle"); | |
| } | |
| self.trigger('modelLoaded', { | |
| id: model.id | |
| }); | |
| }); | |
| } | |
| }); | |
| return self; | |
| }; | |
| }; | |
| return chr; | |
| }()); | |
| require('biojs-events').mixin(Chromosome.prototype); | |
| module.exports = Chromosome; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment