visNetwork + R: show node labels only on select

Question

trying to get node labels to be shown only on nodes that have been selected.

I found a similar question that wanted to only show edge labels on hover. The solution was this:

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(hoverEdge = "function(e){
    this.body.data.edges.update({id: e.edge, font: {size : 14}});
  }") %>%
  visEvents(blurEdge = "function(e){
    this.body.data.edges.update({id: e.edge, font: {size : 0}});
  }")

I've tried modifying this but I don't think I'm doing the javascript part right, I know JS hardly at all.

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 instead causes a new node to be created every time I select or deselect a node. While sitting and clicking on them was a fun way to crash my Rsession, it unfortunately hasn't solved my problem.

I'm sure this is a simple fix but I've been through the visNetwork documentation and I'm just not finding what I need. Help appreciated!

Are you trying to accomplish this in a shiny application, or are you just creating an HTML widget? — kostr, Aug 17 '17 at 17:11
Just an HTML widget. The code I posted is all I'm working with. — jamzsabb, Aug 17 '17 at 17:54
It appears that somebody added this issue to github: https://github.com/datastorm-open/visNetwork/issues/195 — kostr, Aug 17 '17 at 19:37
Yea that was me, I realized that there wasn't a lot of visNetwork activity on SO so went to the source. I'll post any answers I come up in both spots — jamzsabb, Aug 18 '17 at 14:19

score 1 · Answer 1 · answered Aug 18 '17 at 15:34

This should do the trick. This JS is actually creating a variable based off both of the labels in the dataframe. I'm sure there's a more technical method to doing this, but it should still work just fine.

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)

That's really close, but it makes the label appear when the node is selected, but it stays when deselected. This is really close though, thank you! — jamzsabb, Aug 21 '17 at 15:29

visNetwork + R: show node labels only on select

1 Answers1