使用networkD3突出显示从Sankey图的开始到结尾的所有连接路径 [英] Highlight all connected paths from start to end of a sankey diagram using networkD3

问题描述

我想使用R中的networkD3软件包生成Sankey-diagram，该软件包具有此问题中所述的功能，并在答案中包含"highlight_node_links"功能:

I would like to produce a Sankey-diagram using the networkD3 package in R that has the functionality as described in this question, and the "highlight_node_links" function in the answer:

> d3 Sankey-从开始就突出显示所有已连接的路径结束

我是R和Javascript的初学者，我的问题是我无法使上述javascript函数与我的R代码一起使用.我已检查突出显示所有已连接Sankey图中从头到尾的路径也使用R 问题，但不幸的是，我也无法根据那里的答案来解决它.我知道我需要使用htmlwidgets::onRender，但无法弄清楚该怎么做.

I'm a beginner with both R and Javascript and my problem is that I cannot make the above javascript function work with my R code. I have checked Highlight all connected paths from start to end in Sankey graph using R question too, but unfortunately I couldn't solve it based on the answer there either. I do understand I need to use htmlwidgets::onRender, but cannot figure out how.

少量样本数据以及由此产生的网络:

A small sample data and the network generated from it:

links = data.frame(source = c("me",  "you", "she", "p1",  "p1",  "p2",  "p2"), target = c("p1",  "p2",  "p1",  "p2",  "b1",  "b1",  "b2"), weight = c(20, 10, 30, 40, 60, 50, 50)) 
nodes <- data.frame(name = c(links$source, links$target) %>% unique()) 
links$IDsource = match(links$source, nodes$name)-1 
links$IDtarget = match(links$target, nodes$name)-1

sn <- sankeyNetwork(Links = links, 
                      Nodes = nodes,
                      Source = "IDsource", 
                      Target = "IDtarget",
                      Value = "weight",  
                      NodeID = "name",  
                      sinksRight = TRUE)

以及我尝试包括highlight_node_links函数的方式(我在上面的链接中未定义):

And the way I tried to include the highlight_node_links function (that I defined earlier unchanged from the above link):

    htmlwidgets::onRender(
  sn,
  '
        function(el, x) {
          var link = d3.selectAll(".link");
         var node = d3.selectAll(".node");
        node.on("mousedown.drag", null);
        node.on("click",highlight_node_links);

  function highlight_node_links(node,i){

  var remainingNodes=[],
  nextNodes=[];

  var stroke_opacity = 0;
  if( d3.select(this).attr("data-clicked") == "1" ){
  d3.select(this).attr("data-clicked","0");
  stroke_opacity = 0.2;
  }else{
  d3.select(this).attr("data-clicked","1");
  stroke_opacity = 0.5;
  }

  var traverse = [{
  linkType : "sourceLinks",
  nodeType : "target"
  },{
  linkType : "targetLinks",
  nodeType : "source"
  }];

  traverse.forEach(function(step){
  node[step.linkType].forEach(function(link) {
  remainingNodes.push(link[step.nodeType]);
  highlight_link(link.id, stroke_opacity);
  });

  while (remainingNodes.length) {
  nextNodes = [];
  remainingNodes.forEach(function(node) {
  node[step.linkType].forEach(function(link) {
  nextNodes.push(link[step.nodeType]);
  highlight_link(link.id, stroke_opacity);
  });
  });
  remainingNodes = nextNodes;
  }
  });
  }

  function highlight_link(id,opacity){
  d3.select("#link-"+id).style("stroke-opacity", opacity)
         }}'
)

推荐答案

在运行您的代码时，我收到警告消息...

When I run your code, I get the warning message...

Warning message:
It looks like Source/Target is not zero-indexed. This is required in JavaScript
 and so your plot may not render.

告诉您问题的根源是什么links和nodes数据帧未正确创建.

which tells you what the root of the problem is... your links and nodes data frames are not properly created.

通过将stringsAsFactors = FALSE作为参数添加到用于创建links数据框的data.frame命令中，可以轻松解决此问题.

You can easily resolve this by adding stringsAsFactors = FALSE as a parameter to the data.frame command that you use to create the links data frame.

工作示例...

library(networkD3)
library(htmlwidgets)
library(dplyr)

links = data.frame(
  source = c("me",  "you", "she", "p1",  "p1",  "p2",  "p2"),
  target = c("p1",  "p2",  "p1",  "p2",  "b1",  "b1",  "b2"),
  weight = c(20, 10, 30, 40, 60, 50, 50),
  stringsAsFactors = FALSE
)
nodes <-
  data.frame(name = c(links$source, links$target) %>% unique())
links$IDsource = match(links$source, nodes$name) - 1
links$IDtarget = match(links$target, nodes$name) - 1

sn <- sankeyNetwork(
  Links = links,
  Nodes = nodes,
  Source = "IDsource",
  Target = "IDtarget",
  Value = "weight",
  NodeID = "name",
  sinksRight = TRUE
)

htmlwidgets::onRender(
  sn,
  '
        function(el, x) {
          var link = d3.selectAll(".link");
         var node = d3.selectAll(".node");
        node.on("mousedown.drag", null);
        node.on("click",highlight_node_links)}'
)

这篇关于使用networkD3突出显示从Sankey图的开始到结尾的所有连接路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！