Link（不是节点）networkD3 的 forceNetwork 和 htmlwidgets 中的工具提示

Question

我搜索了一种使用 forceNetwork 将工具提示附加到节点之间的 links（即边缘）的方法，但结果是空的。这些是我发现的最相关的示例：

如何将工具提示添加到 sankeyNetwork links： Displaying edge information in Sankey tooltip
如何添加工具提示 forceNetwork 节点： Implementing tooltip for networkD3 app

那么如何将工具提示添加到 forceNetwork links？可能吗？我看到 forceNetwork 有一个 clickAction 属性，您可以使用它来调用带有 htmlwidgets 的 JS。不幸的是，clickAction 似乎作用于节点，而不是它们之间的 links。

这是我的可重现示例：

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

我的目标是让一个字符串变量描述两个节点之间的关系，当用户将鼠标悬停在它们之间的 link 上时。任何关于如何前进的建议将不胜感激。

Answer 1

你必须'append'标题...

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

Link（不是节点）networkD3 的 forceNetwork 和 htmlwidgets 中的工具提示

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

javascript

r

networkd3

htmlwidgets