This project has been replaced by Cytoscape.js, and is no longer active.

NetworkModel

This object represents a NetworkModel type, but is actually just an untyped object.

It defines the raw data (nodes and edges data values) and the data schema for a network. It is important to notice that the network model does not contain Node and Edge objects, as it is not supposed to describe visual attributes such as colors, shapes and x/y coordinates. Visual styles must be defined separately, through VisualStyle or VisualStyleBypass. Nodes positioning are done by Layout objects.

A NetworkModel object has only two fields:

  • dataSchema {DataSchema}: It defines the nodes/edges data fields. You do not need to specify these essential fields: id (nodes or edges), source (edges), target (edges), directed (edges). Actually, trying to modify these fields in the schema might throw an Error.
  • data {Object}: The actual nodes/edges data values used to create Node and Edge elements. It contains two fields (nodes and edges), which are arrays of nodes/edges data objects. Note: data attributes of type int or boolean (see DataField) do NOT accept null values.
var network = {

    dataSchema: {
        nodes: [ { name: "label", type: "string" },
                 { name: "score", type: "number" } ],
                 
        edges: [ { name: "label", type: "string" },
                 { name: "weight", type: "number" },
                 { name: "directed", type: "boolean", defValue: true} ]
    },
    
    data: {
        nodes: [ { id: "n1", label: "Node 1", score: 1.0 },
                 { id: "n2", label: "Node 2", score: 2.2 },
                 { id: "n3", label: "Node 3", score: 3.5 } ],
                 
        edges: [ { id: "e1", label: "Edge 1", weight: 1.1, source: "n1", target: "n3" },
                 { id: "e2", label: "Edge 2", weight: 3.3, source:"n2", target:"n1"} ]
    }
};

Edge

This object represents an Edge type, but is just an untyped object.

So never do:

var edge = new org.cytoscapeweb.Edge(); // Wrong!!!

In order to create an edge, just create an object with the expected fields. Notice that the attribute group must always be "edges", because that is what really defines this type.

color {String} : The edge color, in hexadecimal code (e.g. "#666666").

curvature {Number} : The value that defines the curvature rate of curved edges. Higher values create more curved edges.

data {Object} : The object that stores the custom edge attributes. It should have at least the following properties:

  • id {String}: the edge id.
  • source {String}: the source node id.
  • target {String}: the target node id.
  • directed {Boolean}: a directed edge has a default arrow pointed to the target node.
When the network was created from a SIF data format, the edge's data object will also have the interaction attribute (String type).

edges {Array} : If the edge is a merged one, this property provides the regular parallel edges that were merged together. If the edge is already a regular non-merged type, this property is undefined.

group {Group} : The group name that defines this Data type (always "edges").

merged {Boolean} : Indicate whether or not the edge is a merged one. Merged edges are used to simplify the network visualization by just showing that two nodes are connected to each other, without displaying all the real edges that link them together.

opacity {Number} : The edge opacity, from 0 to 1.0 (100% opaque).

sourceArrowColor {String} : The color code of the source arrow.

sourceArrowShape {ArrowShape} : The shape name of the edge's source arrow.

targetArrowColor {String} : The color code of the target arrow.

targetArrowShape {ArrowShape} : The shape name of the edge's target arrow.

visible {Boolean} : A boolean value that indicates whether or not the edge is set to visible.

width {Number} : The edge line width, in pixels.

zIndex {Number} : The stacking order of the element.

var edge = {
    group: "edges",
    merged: false,
    opacity: 0.8,
    color: "333333",
    width: 2,
    // etc...
    data: {
        id: 1,
        source: 1,
        target: 3,
        weight: 0.5
    }
};

Node

This object represents a Node type, but is actually just an untyped object.

So never do:

var node = new org.cytoscapeweb.Node(); // Wrong!!!

In order to create a node, just create an object with the expected fields. Notice that the attribute group must always be "nodes", because that is what really defines this type.

borderColor {String} : The border color, in hexadecimal code (e.g. "#000000").

borderWidth {Number} : The border width, in pixels.

color {String} : The node fill color, in hexadecimal code (e.g. "#ff3333").

data {Object} : The object that stores the custom node attributes. It should have at least the id property.

group {Group} : The group name that defines this Data type (always "nodes").

height {Number} : The absolute node height (in pixels), when the zoom level is 100%. This value is not scaled, so if you want the real rendered height, you need to multiply this value by the current network scale, which is provided by org.cytoscapeweb.Visualization :: zoom.

nodesCount {Number} : The number of child nodes.

opacity {Number} : The node opacity, from 0 to 1.0 (100% opaque).

shape {NodeShape} : The shape name.

size {Number} : The absolute node size (in pixels), when the zoom level is 100%. It is the highest value of height and width. Notice that this value is not scaled, so if you want the real visualized size, you need to multiply this value by the current network scale, which is provided by org.cytoscapeweb.Visualization :: zoom. If you set the size to "auto", the node will be automatically resized to enclose its label text.

visible {Boolean} : A boolean value that indicates whether or not the node is set to visible.

width {Number} : The absolute node width (in pixels), when the zoom level is 100%. This value is not scaled, so if you want the real rendered width, you need to multiply this value by the current network scale, which is provided by org.cytoscapeweb.Visualization :: zoom.

x {Number} : The x coordinate value that indicates where the center of the node is positioned in the horizontal axis of the Visualization rectangle. If x == 0, the middle point of the node is located exactly at the left border of the network view.

y {Number} : The y coordinate value that indicates where the center of the node is positioned in the vertical axis of the Visualization rectangle. If y == 0, the middle point of the node is located exactly at the top border of the network view.

zIndex {Number} : The stacking order of the element.

var node = {
    group: "nodes",
    shape: "TRIANGLE",
    size: 20,
    color: "0000ff",
    // etc...
    data: {
        id: 1
    }
};

Group

This object represents a Group type. In actuality, it is a string.

However, its value must be one of:

  • nodes
  • edges
  • none (same as null)