CODEWITHSUNDEEP
javascriptrhtmlwidgetsnetworkd3
user3462317
user3462317

Reputation: 45

Link (not node) tooltips in networkD3's forceNetwork and htmlwidgets

My searches for a way to attach tooltips to the links (i.e. edges) between nodes using forceNetwork are coming up empty. These are the most relevant examples I've found:

So how do you add tooltips to forceNetwork links? Is it possible? I see that forceNetwork has a clickAction attribute that you can use to call JS with htmlwidgets. Unfortunately, clickAction seems to act on nodes, not the links between them.

Here is my reproducible example:

library(networkD3)
library(htmlwidgets)

# Load data
data(MisLinks)
data(MisNodes)  

# Make network using sample data
fn <- forceNetwork(
  Links  = MisLinks, Nodes   = MisNodes,
  Source = "source", Target  = "target",
  Value  = "value",  NodeID  = "name",
  Group  = "group"
)

# Get the target variable in fn$x$links (an integer id) to show up as a tooltip when user hovers over a link (i.e. edge) in the graph
fnrender <- htmlwidgets::onRender(
  fn,
  '
  function(el, x) {
  d3.selectAll(".link").select("title")
  .text(function(d) { return d.target; });
  }
  '
)

# display the result
fnrender

My goal is to have a string variable describing the relationship between 2 nodes show up when the user hovers over the link between them. Any suggestions on how to move forward would be much appreciated.

Upvotes: 1

Views: 750

Answers (1)

CJ Yetman
CJ Yetman

Reputation: 8848

You have to 'append' the title...

library(networkD3)
library(htmlwidgets)

# Load data
data(MisLinks)
data(MisNodes)

# Make network using sample data
fn <- forceNetwork(
  Links  = MisLinks, Nodes   = MisNodes,
  Source = "source", Target  = "target",
  Value  = "value",  NodeID  = "name",
  Group  = "group"
)

# Get the target variable in fn$x$links (an integer id) to show up as a tooltip when user hovers over a link (i.e. edge) in the graph
fnrender <- htmlwidgets::onRender(
  fn,
  '
  function(el, x) {
    d3.selectAll(".link").append("svg:title")
      .text(function(d) { return d.source.name + " -> " + d.target.name; })
  }
  '
)

# display the result
fnrender

Upvotes: 1

Related Questions