CODEWITHSUNDEEP
cytoscape.js
JD.
JD.

Reputation: 2487

How do you get a node's children?

I have a parent node with two children ( and multiple grandchildren ). How do I select just the children of given node ( but not the node itself )?

The other functions edgesWith and edgesTo link two collections together, I just want the children of a node.

I've tried this unsuccessfully

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } }
    ]
  },

  ready: function(){
    window.cy = this;

    // Elaine, Kramer, George should be blue!
    cy.elements('node[id="j"] node').css({'background-color': 'blue'});
  }
});

Upvotes: 1

Views: 3286

Answers (2)

vatsa
vatsa

Reputation: 134

Slight changes from Matthew Burke's answer which selects all children instead of one child.

   ready: function() {
      window.cy = this;

      var edgesFromJerry = cy.edges('edge[source="j"]');
      var jerryChildren = edgesFromJerry.targets();
      jerryChildren.css('background-color', 'blue');
    }

Posting as answer instead of comment as answers in comments tend to be a hard find

Upvotes: 0

Matthew Burke
Matthew Burke

Reputation: 2364

Change your ready function to the following:

ready: function() {
  window.cy = this;

  var edgesFromJerry = cy.elements('edge[source="j"]');
  var jerryChildren = edgesFromJerry.target();
  jerryChildren.css('background-color', 'blue');
}

Upvotes: 2

Related Questions