Is there a way to make Force Network D3 labels remain permanently, rather than hover over?

Question

Here is my program:

networkD3::forceNetwork(Links = links.d3, Nodes = nodes.d3,
                        Source = "from", Target = "to", 
                        NodeID = "node_id", Group = "group_id",
                        zoom = TRUE, opacity = 1.0, legend = TRUE,
                        fontSize = 12)

Then I tried: onRender(network, "function(el,x) { d3.selectAll('.node').on('mouseover', null); }")

This just removes the labels all together. Ideally, I want to be able to click a node, and then have a node's label remain, after I hover away from it.

Thanks!!

Answer 1

Use opacityNoHover = 1 as a parameter to the forceNetwork() function. This and all other options are in the help file (type ?networkD3::forceNetwork in the console). That will make all the labels visible all the time.

If you want to prevent the labels from disappearing when you move the mouse away from the node, just modify your code to null the mouseout event instead of the mouseover event... onRender(network, "function(el,x) { d3.selectAll('.node').on('mouseout', null); }")

---

UPDATE 2020.04.09

Here's a solution for making a click turn on or off the label for that node...

library(networkD3)
library(htmlwidgets)
network <- 
  forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
               Target = "target", Value = "value", NodeID = "name",
               Group = "group", opacity = 1)

clickjs <- 
"function(el, x) { 
  var options = x.options;
  var svg = d3.select(el).select('svg');
  var node = svg.selectAll('.node');
  var link = svg.selectAll('link');
  var mouseout = d3.selectAll('.node').on('mouseout');
  function nodeSize(d) {
    if (options.nodesize) {
      return eval(options.radiusCalculation);
    } else {
      return 6;
    }
  }

  d3.selectAll('.node').on('click', onclick);

  function onclick(d) {
    if (d3.select(this).on('mouseout') == mouseout) {
      d3.select(this).on('mouseout', mouseout_clicked);
    } else {
      d3.select(this).on('mouseout', mouseout);
    }
  }

  function mouseout_clicked(d) {
    node.style('opacity', +options.opacity);
    link.style('opacity', +options.opacity);

    d3.select(this).select('circle').transition()
      .duration(750)
      .attr('r', function(d){return nodeSize(d);});
    d3.select(this).select('text').transition()
      .duration(1250)
      .attr('x', 0)
      .style('font', options.fontSize + 'px ');
  }
}
"

onRender(network, clickjs)