2

I am trying to dynamically update nodes of my cy object with the "parent" field. When the elements are first loaded in from a json file, they do not have a parent field. The documentation says I should be able to set a particular data field simply with cy.data( name, value ). However, this appears to only work the attribute name is one that already exists.

I have thought to create a copy of each node to add my parent attribute to, and then remove the old node; however my graph is quite large and this seems like a last resort.

1 Answer 1

1

I tried this with my code and got it to work properly with .move():

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
      selector: 'node',
      style: {
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: 'a',
          parent: ''
        }
      },
      {
        data: {
          id: 'b',
          parent: ''
        }
      },
      {
        data: {
          id: 'c',
          parent: ''
        }
      },
      {
        data: {
          id: 'd',
          parent: 'p'
        }
      },
      {
        data: {
          id: 'p',
          parent: ''
        }
      }
    ],
    edges: [

    ]
  }
});

cy.bind('click', 'node', function(evt) {
  evt.target.move({
    parent: cy.getElementById('p').id()
  })
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <title>cytoscape-add-attribute demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <h1>cytoscape add-attribute-demo</h1>
  <div id="cy"></div>
</body>

The documentation has two versions of .data(), one for the core cy element, and one for any element, so also nodes, edges, the canvas...

I think your problem came from that, if not, let me know what code you use exactly :D THX

3
  • Thanks for your answer! My problem was more with the fact that the parent attribute did not previously exist in my nodes data schema, and I wasn't able to add the parent using the .data(parent, p_id) format. Actually it looks like due to the fact that the parent is an immutable attribute, I have to use eles.move
    – Ellen Wang
    Oct 28, 2019 at 7:50
  • I am still having trouble with eles.move({parent: p_id}) though. It is not updating the parent attribute, not sure if it is because I need to have that field already existing in data?
    – Ellen Wang
    Oct 28, 2019 at 8:07
  • I edited my answer and it seems to work with your advice
    – Stephan T.
    Oct 28, 2019 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.