Class Index | File Index

Classes


Class Biojs.InteractionsD3


Version 0.9.1_beta.

Extends Biojs.

Defined in: Biojs.InteractionsD3.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
This component uses the D3 library and specifically its implementation of the force algorithm to represent a network of protein interactions.
Field Summary
Field Attributes Field Name and Description
<inner>  
Array containing the supported event names
<inner>  
opt
Default values for the options
Method Summary
Method Attributes Method Name and Description
 
addInteraction(proteinId1, proteinId2, extraAtributes)
Adds an interaction between 2 proteins that are already in the graphic using their IDs
 
addLegends(legends, type, color)
Adds a legend to the graphic
 
addProtein(protein)
Adds a protein to the graphic
 
constructor(options)
 
fixProteinAt(protein, x, y)
fix into the graphic a protein in a determined position
 
gets an array of objects with the list of proteins which poition has been fixed into the graphic
 
getInteraction(proteinId1, proteinId2)
gets the interaction object by the id of its proteins
 
getInteractionIndex(proteinId1, proteinId2)
Gets the array index of the interaction object by the ids of the interactors
 
getProtein(proteinId)
Gets the protein object by its id
 
hide(selector)
Hides the elements on the graphic that match the selector.
 
hideLegend(selector)
Hide the legend(id) of the protein
 
highlight(selector)
Highlight the elements on the graphic that match the selector.
 
refreshSizeScale(selector)
Scales the size of the proteins which value has been modify by other means
 
removeInteraction(proteinId1, proteinId2)
Removes from the graphic the interaction by the id of its proteins
 
removeProtein(proteinId, excludelist)
removes a protein from the graphic with all the interactions unless the interactor is also interacting with another protein that is visible.
 
Resets the graphic to zero proteins - zero interactions
 
Restart the graphic to materialize the changes done on it(e.g.
 
setColor(selector, color)
Set the stroke's color of the elements on the graphic that match the selector.
 
setFillColor(selector, color)
Set the fill's color of the elements on the graphic that match the selector.
 
setSize(width, height)
allows to resize the SVG element updating the gravity points
 
setSizeScale(protein, scale)
Scales the area of a protein
 
show(selector)
Shows the elements on the graphic that match the selector.
 
showLegend(protein, typeLegend)
Shows the legend(id) of the protein
 
swapFixed(protein)
If the protein has a fixed position in the graphic it gets released, or viceversa other wise
 
swapShowLegend(protein)
Shows/Hide the legend(id) of the protein
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Event Summary
Event Attributes Event Name and Description
 
interactionClick(actionPerformed)
 
interactionMouseOut(actionPerformed)
 
interactionMouseOver(actionPerformed)
 
proteinClick(actionPerformed)
 
proteinMouseOut(actionPerformed)
 
proteinMouseOver(actionPerformed)
 
sizeChanged(actionPerformed)
Class Detail
Biojs.InteractionsD3(options)
This component uses the D3 library and specifically its implementation of the force algorithm to represent a network of protein interactions.
Author: Gustavo A. Salazar.
			var instance = new Biojs.InteractionsD3({
				target: "YourOwnDivId",
			});	
			for (var pid=1;pid<=15;pid++)
				instance.addProtein({ "id":pid,"name":pid,"showLegend":false,"typeLegend":"id","organism":"human"+pid%3,"features":{"f1":"val1","f2":"val2","f3":"val3"}});
			
			for (var pid=1;pid<=30;pid++)
				instance.addInteraction(Math.floor((Math.random()*15)+1),Math.floor((Math.random()*15)+1) ,{score:Math.random()});
			instance.restart();
Parameters:
{Object} options
An object with the options for the InteractionsD3 component.
Options detailed:
{string} target
Identifier of the DIV tag where the component should be displayed.
{string} width
Width of the SVG element, if given in percentage it will use it on proportion of the container
{string} height
Height of the SVG element, if given in percentage it will use it on proportion of the container
{string} radius
Radius of the nodes representing the proteins
{string} enableEdges
Force the proteins to stay in the defined area of the SVG
Requires:
jQuery Core 1.7.2
D3
InteractionsD3 CSS
Field Detail
<inner> eventTypes
Array containing the supported event names

<inner> opt
Default values for the options
Method Detail
addInteraction(proteinId1, proteinId2, extraAtributes)
Adds an interaction between 2 proteins that are already in the graphic using their IDs
instance.addInteraction(Math.floor((Math.random()*15)+1),Math.floor((Math.random()*15)+1) ,{score:Math.random()});
instance.restart();
Parameters:
{string} proteinId1
Id of the first protein in the interaction
{string} proteinId2
Id of the second protein in the interaction
{Object} extraAtributes Optional, Default: {}
An object containing meta information of the interaction to be stored in the interaction itself. useful for triggered events

addLegends(legends, type, color)
Adds a legend to the graphic
						
instance.addLegends(["Legend red"],"Color","#FF0000");
instance.restart();
Parameters:
legends
type
color

addProtein(protein)
Adds a protein to the graphic
 instance.addProtein({ "id":"new","name":"new","showLegend":true,"typeLegend":"id","organism":"human"+pid%3,"features":{"f1":"val1","f2":"val2","f3":"val3"}});
instance.restart();
Parameters:
{Object} protein
An object containing information of the protein

constructor(options)
Parameters:
options

fixProteinAt(protein, x, y)
fix into the graphic a protein in a determined position
instance.fixProteinAt("7",10,10);
instance.restart();
Parameters:
protein
x
y

getFixedProteins()
gets an array of objects with the list of proteins which poition has been fixed into the graphic
alert(instance.getFixedProteins());

{Object} getInteraction(proteinId1, proteinId2)
gets the interaction object by the id of its proteins
alert(instance.getInteraction('1','3'));
Parameters:
{string} proteinId1
The id of the first protein
{string} proteinId2
The id of the second protein
Returns:
{Object} An object containing information of the interaction

{Integer} getInteractionIndex(proteinId1, proteinId2)
Gets the array index of the interaction object by the ids of the interactors
alert(instance.getInteractionIndex('3','5'));
Parameters:
{string} proteinId1
The id of the first protein interacting
{string} proteinId2
The id of the second protein interacting
Returns:
{Integer} An int value indicating the index of the interaction in the array this.interactions

{Object} getProtein(proteinId)
Gets the protein object by its id
alert(instance.getProtein('3'));
Parameters:
{string} proteinId
The id of the protein
Returns:
{Object} protein An object containing information of the protein

hide(selector)
Hides the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.hide("[id = node_10]");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

hideLegend(selector)
Hide the legend(id) of the protein
instance.hideLegend("#node_5 .legend");
Parameters:
{string} selector
a CSS3 selector to choose the nodes to hide its legend

highlight(selector)
Highlight the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.highlight("[id *= node_1]");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

refreshSizeScale(selector)
Scales the size of the proteins which value has been modify by other means
for (var i=0;i
					
					
					
						
							
Parameters:
{string} selector
a CSS3 selector to choose the nodes to resize

removeInteraction(proteinId1, proteinId2)
Removes from the graphic the interaction by the id of its proteins
instance.removeInteraction('2','3');
Parameters:
{string} proteinId1
The id of the first protein
{string} proteinId2
The id of the second protein

removeProtein(proteinId, excludelist)
removes a protein from the graphic with all the interactions unless the interactor is also interacting with another protein that is visible.
instance.removeProtein('2');
Parameters:
{string} proteinId
The id of the protein to delete
excludelist

resetGraphic()
Resets the graphic to zero proteins - zero interactions
instance.resetGraphic();

restart()
Restart the graphic to materialize the changes done on it(e.g. add/remove proteins) It is here where the SVG elemnts are created.
instance.restart();

setColor(selector, color)
Set the stroke's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.setColor("[id *= node_2]","#FF0000");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
{string} color
a color in web format eg. #FF0000

setFillColor(selector, color)
Set the fill's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.setFillColor(".figure","#FF0000");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
{string} color
a color in web format eg. #FF0000

setSize(width, height)
allows to resize the SVG element updating the gravity points
instance.setSize(400,400);
instance.restart();
Parameters:
{string} width
value of width to be assign to the SVG
{string} height
value of height to be assign to the SVG

setSizeScale(protein, scale)
Scales the area of a protein
instance.setSizeScale("#figure_1",4);
Parameters:
{string} protein
the id of the protein to scale
{integer} scale
value to scale a node

show(selector)
Shows the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.show("[id = node_10]");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

showLegend(protein, typeLegend)
Shows the legend(id) of the protein
instance.swapShowLegend("#node_5 .legend");
Parameters:
{string} protein
the id of the protein to swap the visibility of the legend
typeLegend

swapFixed(protein)
If the protein has a fixed position in the graphic it gets released, or viceversa other wise
instance.swapFixed("3");
Parameters:
{string} protein
the id of the protein to swap is position on the graphic

swapShowLegend(protein)
Shows/Hide the legend(id) of the protein
instance.swapShowLegend("#node_5 .legend");
Parameters:
{string} protein
the id of the protein to swap the visibility of the legend
Event Detail
interactionClick(actionPerformed)
instance.interactionClick(
   function( objEvent ) {
      alert("Click on the interaction " + objEvent.interaction.source.id +" - "+ objEvent.interaction.target.id);
   }
);
Parameters:
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Event object data:
{Object} source
The component which did triggered the event.
{Object} interaction
the information of the interaction that has been clicked.

interactionMouseOut(actionPerformed)
instance.interactionMouseOut(
   function( objEvent ) {
     alert("The mouse is out of the interaction " + objEvent.interaction.source.id +" - "+ objEvent.interaction.target.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer leave an interaction
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} source
The component which did triggered the event.
{Object} interaction
the information of the interaction that has been mouseout.

interactionMouseOver(actionPerformed)
instance.interactionMouseOver(
   function( objEvent ) {
      alert("The mouse is over the interaction " + objEvent.interaction.source.id +" - "+ objEvent.interaction.target.id);
   }
);
Parameters:
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Event object data:
{Object} source
The component which did triggered the event.
{Object} interaction
the information of the interaction that has been mouseover.

proteinClick(actionPerformed)
instance.proteinClick(
   function( objEvent ) {
      alert("The protein " + objEvent.protein.id + " was clicked.");
   }
);
Parameters:
{function} actionPerformed
It is triggered when the user clicks on a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been clicked.

proteinMouseOut(actionPerformed)
instance.proteinMouseOut(
   function( objEvent ) {
      alert("The mouse is out the protein " + objEvent.protein.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer leave the area of a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been mouseout.

proteinMouseOver(actionPerformed)
instance.proteinMouseOver(
   function( objEvent ) {
      alert("The mouse is over the protein " + objEvent.protein.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer is over a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been mouseover.

sizeChanged(actionPerformed)
instance.sizeChanged(
   function( objEvent ) {
     alert("The size has changed: ("+objEvent.width+","+objEvent.height+")" );
   }
);
Parameters:
{function} actionPerformed
It is triggered when the size of the SVG element has been changed.
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} source
The component which did triggered the event.
{Object} width
The width of the new size
{Object} height
The height of the new size

Documentation generated by JsDoc Toolkit 2.3.2 on Thu Apr 17 2014 17:42:43 GMT+0100 (BST)