javascript - visNetwork + R : show node labels only on select

Question

试图让节点标签只显示在已选择的节点上。

我找到了 a similar question只想在悬停时显示边缘标签。解决方案是这样的:

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}});
  }")

我试过修改它，但我认为我做的 javascript 部分不对，我对 JS 几乎一无所知。

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}});
  }")

这会导致每次我选择或取消选择一个节点时都会创建一个新节点。虽然坐下来点击它们是一种让我的 Rsession 崩溃的有趣方式，但遗憾的是它并没有解决我的问题。

我确信这是一个简单的修复，但我已经阅读了 visNetwork 文档，但我只是没有找到我需要的东西。帮助表示赞赏!

Answer 1

这应该可以解决问题。这个 JS 实际上是基于数据框中的两个标签创建一个变量。我敢肯定有更多的技术方法可以做到这一点，但它应该仍然可以正常工作。

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)