Sławosz
Sławosz

Reputation: 11687

How to hide label in edge in visjs graph?

I would like to display label only when edge is selected, is there a library method to do this?

Eventually I thought about having a store for edge properties including label, is this a good idea?

Upvotes: 1

Views: 3361

Answers (3)

PrimosK
PrimosK

Reputation: 13918

I've found this workaround to be easiest way to achieve it:

var options = {
    edges: {
        font: {
            size: 0
        },
        chosen: {
            label: function (values, id, selected, hovering) {
                values.size = 14;
            }
        }
    }
}

var network = new vis.Network(container, data, options);

Explanation:

The font size of all edges is set to 0. The font size of selected edge is set to desired value.

Side note:

For some reason this approach doesn't work.

See: https://github.com/almende/vis/issues/4112

Upvotes: 2

Bob B
Bob B

Reputation: 4614

If the edge's label field is set then the label is shown. There is no way to configure that to behave differently. To hide the label, simply move the value to a hidden field such as _label or label_hidden. Then when you are ready to show the label do edge.label = edge._label.

One heads up: if you delete edge.label and update it via DataSet.update then it will not be deleted. You have to set it to "" or null.

Upvotes: 0

Jos de Jong
Jos de Jong

Reputation: 6809

There is no such method.

What you can do is listen to the selectEdge events, and when an edge is selected, remove it's label. When the edge is deselected, add it's label again.

Upvotes: 2

Related Questions