使用networkD3突出显示桑基图从开始到结束的所有连接路径

我想使用 R 中的 networkD3 包生成一个桑基图，该包具有此问题中描述的功能，以及答案中的“highlight_node_links”函数：

d3 Sankey - 突出显示从开始到结束的所有连接路径 https://stackoverflow.com/questions/19195888/d3-sankey-highlight-all-connected-paths-from-start-to-end

我是 R 和 Javascript 的初学者，我的问题是我无法使上述 javascript 函数与我的 R 代码一起工作。我检查过使用 R 在桑基图中突出显示从开始到结束的所有连接路径 https://stackoverflow.com/questions/46142160/highlight-all-connected-paths-from-start-to-end-in-sankey-graph-using-r问题也是如此，但不幸的是我也无法根据那里的答案解决它。我明白我需要使用htmlwidgets::onRender，但无法弄清楚如何。

一个小样本数据以及从中生成的网络：

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函数（我之前在上面的链接中定义的函数没有更改）：

    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)
         }}'
)

当我运行你的代码时，我收到警告消息......

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

它告诉你问题的根源是什么......你的links and nodes数据框未正确创建。

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

工作示例...

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)}'
)