5

So I'm aware you can use a function to compute a css property in Cytoscape.js e.g.

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return 12;
    })

I'm also aware of the special value 'label' that can be the value of the property e.g.

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': 'label'
    })

What I'm wondering is is there any particular property I could use to scale the label by some factor, e.g. what I want is something like

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return labelWidth * 1.5; //Where to get labelWidth from
    })

Specially I want the ability to be able to calculate the height and width of an ellipse so that the label is completely contained within the ellipse (which can be computed using some math e.g. Ellipse bounding a rectangle).

But I haven't been able to find a way to get the labelWidth. I did manage to do it using rscratch but only if the node actually got rendered twice (e.g. multiple .selectors), any proper way to get the label width and height from a given element (or at least a way to calculate how it'll be rendered?).

1
  • maybe late, but thought of posting, ele.rscratch() after rendered
    – Rishi0405
    Dec 4, 2018 at 12:51

2 Answers 2

1

If you want to do more sophisticated sizing, your calculations are going to have to be more sophisticated.

Options :

(1) Calculate the dimensions of the text yourself using a div.

(2) Use the auto sizing, and then adjust the size based on the current size.

(1) is cleaner than (2).

It doesn't make sense for Cytoscape.js to expose rendered calculated values for you in the stylesheet. Those values are calculated from the stylesheet, creating a dependency cycle.

-1

If you just want the label inside your node, you could just set the padding attribute to make more space around the text.

Your Answer

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

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