christophergandrud / networkD3

D3 JavaScript Network Graphs from R
http://christophergandrud.github.io/networkD3
649 stars 270 forks source link

Customizing the label/text for each link in ForceNetwork output? #271

Closed TS404 closed 4 years ago

TS404 commented 4 years ago

Would it be possible to show custom lablel text for both unhovered and hovered nodes? E.g. for a coauthor network, initials when unhovered, full names when hovered. I'm looking to use this package for visualising networks of COVID19 publications clustered by authors, topics and citations (openVirus).

(Related to #239 and #243)

cjyetman commented 4 years ago

Yes, but only by writing custom JavaScript code to make it work. That is not a built-in feature.

TS404 commented 4 years ago

Thank you. On an unrelated note, just in case you've much experience with shinyapps, I've been having trouble deploying at networkd3 online:

cjyetman commented 4 years ago

here's an example of changing the node label text on mouseover and mouseout...

library(networkD3)
library(htmlwidgets)

MisNodes$initials <- gsub('[[:lower:]]', '', MisNodes$name)

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

network$x$nodes$initials <- MisNodes$initials
network$x$nodes$fullname <- MisNodes$name

name_switch_js <- 
  "function(el, x) {
    var nodes = el.getElementsByClassName('node');

    [...nodes].map(node => node.addEventListener('mouseover', function(ev) {
        d3.select(ev.target.parentNode).select('text').text(d => d.fullname);
      }, false));

    [...nodes].map(node => node.addEventListener('mouseout', function(ev) {
        d3.select(ev.target.parentNode).select('text').text(d => d.initials);
      }, false));
  }
"

onRender(network, name_switch_js)
TS404 commented 4 years ago

champion, thank you!

On Mon, 20 Apr 2020 at 00:29, CJ Yetman notifications@github.com wrote:

Closed #271 https://github.com/christophergandrud/networkD3/issues/271.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/christophergandrud/networkD3/issues/271#event-3249108816, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACN6ETOMX3KXMSCOT2H2NSDRNMDEDANCNFSM4MIPZEAA .