Question: Possible to show node labels only when selected?

[v1nsai]

I'm trying to only show node labels on selected nodes, but I don't know javascript very well and I don't think I'm doing something right.

nodes <- data.frame(id = 1:3, label = 1:3)
edges <- data.frame(from = c(1,2), to = c(1,3), label = "Edge label", font.size = 0)
visNetwork(nodes, edges) %>%
  visInteraction(hover = T) %>%
  visEvents(selectNode= "function(e){
    this.body.data.nodes.update({id: e.node, font: {size : 14}});
  }") %>%
  visEvents(deselectNode= "function(e){
    this.body.data.nodes.update({id: e.node, font: {size : 0}});
  }")

This is modified from similar code that shows edge labels only when hovering, but when I run this code it just creates more nodes when I select and deselect. Help appreciated!

[v1nsai]

Someone wiser than me provided some help on Stack Overflow. It doesn't quite answer the question, but it's closer.

I've given up and am just using tooltips as popup labels instead. This is probably better anyway because the tooltip doesn't scale with the graph like the labels do.

But if anyone is still interested in doing this, the code from my SO question is below.

library(visNetwork)


nodes <- data.frame(id = 1:3, label = paste0(""), label_long = c('Label 1','Label 2','Label 3'))
edges <- data.frame(from = c(1,2), to = c(1,3), label = "Edge label", font.size = 0)

net <- visNetwork(nodes, edges) %>%
  visInteraction(hover = T) %>%
  visEvents(selectNode  = "function(e){
            var label_info = this.body.data.nodes.get({
            fields: ['label', 'label_long'],
            filter: function (item) {
            return item.id === e.node
            },
            returnType :'Array'
            });
            this.body.data.nodes.update({id: e.node, label : label_info[0].label_long, label_long : label_info[0].label});
            }") %>% 
  visEvents(blurNode  = "function(e){
            var label_info = this.body.data.nodes.get({
            fields: ['label', 'label_long'],
            filter: function (item) {
            return item.id === e.node
            },
            returnType :'Array'
            });
            this.body.data.nodes.update({id: e.node, label : label_info[0].label_long, label_long : label_info[0].label});
  }")

print(net)

[bthieurmel]

Hi,

I think it's not possible using selection rather than hover because the events are not build in the same way.

deselectNode not return the id of the deselected nodes. (and it's why you create new nodes with your first example.