forcenetwork 在 Rstudio 中显示良好，但在保存后在 html 中没有显示任何边缘

问题描述

我一直在尝试通过 R 中的 networkD3 包使用 forceNetwork 绘制网络 但是网络性能在Rstudio和html中表现出不同。 forceNetwork 函数就是为了这个目的：显示具有丰富视觉特征的图形。

Here is the dataframe：

connection:station1 station2    line    time;
line: line  name    colour  stripe;
station:id  latitude    longitude   name    display_name    zone    total_lines 

这是我的代码：

# load libraries
library(networkD3)
library(dplyr)
# load data
stations <- read.csv("stations.csv")
connections <- read.csv("connections.csv")
lines <- read.csv("lines.csv")

# bring in line colour into connections dataframe for edge colours

connections <- merge(connections,lines)

connections <- connections[,c("station1","station2","line","colour")]

# define a colour for each station using min of line ID

connections_unique_lines1 <- connections %>% dplyr::group_by(station1) %>%

  dplyr::summarise(line = min(line))

colnames(connections_unique_lines1) <- c("station","line")

connections_unique_lines2 <- connections %>% dplyr::group_by(station2) %>%

  dplyr::summarise(line = min(line))

colnames(connections_unique_lines2) <- c("station","line")

connections_unique_lines3 <- rbind(connections_unique_lines1,connections_unique_lines2)

connections_unique_lines <- connections_unique_lines3 %>% dplyr::group_by(station) %>%

  dplyr::summarise(line = min(line))

# merge line IDs into stations dataframe
stations <- dplyr::left_join(stations,connections_unique_lines,by = c("name" = "station"))

# merge with lines dataframe to capture line_name

stations <- dplyr::left_join(stations,lines,by = "line")

# create indices for each name to fit forceNetwork data format

connections$source.index <- match(connections$station1,stations$name) - 1

connections$target.index <- match(connections$station2,stations$name) – 1

networkD3::forceNetwork(Links = connections,Nodes = stations,Source = "source.index",Target = "target.index",NodeID = "name",Group = "line_name",colourScale = JS('d3.scaleOrdinal().domain(["Bakerloo","Central","Circle","district","East London","Hammersmith & City","Jubilee","Metropolitan","northern","Piccadilly","Victoria","Waterloo & City","Docklands"]).range(["#AE6017","#FF0000","#FFE02B","#00A166","#FBAE34","#F491A8","#949699","#91005A","#000000","#094FA3","#0A9CDA","#88D0C4","#00A77E"])'),linkColour = as.character(connections$colour),charge = -30,linkdistance = 25,opacity = 1,zoom = T,fontSize = 12,fontFamily = "Gill Sans Nova",legend = TRUE)


library(htmltools)
fn <- htmlwidgets::onRender(
  fn,'
  function(el,x){
  d3.selectAll(".legend text").style("fill","white");
  d3.selectAll(".legend text").style("fill","white");
  debugger;
  var optArray = [];
  for (var i = 0; i < x.nodes.name.length - 1; i++) {
  optArray.push(x.nodes.name[i]);
  }
  
  optArray = optArray.sort();
  
  $(function () {
  $("#search").autocomplete({
  source: optArray
  });
  });
  
  
  d3.select(".ui-widget button").node().onclick=searchNode;
  
  function searchNode() {
  debugger;
  //find the node
  
  var selectedVal = document.getElementById("search").value;
  var svg = d3.select(el).select("svg");
  var node = d3.select(el).selectAll(".node");
  
  if (selectedVal == "none") {
  node.style("stroke","white").style("stroke-width","1");
  } else {
  var selected = node.filter(function (d,i) {
  return d.name != selectedVal;
  });
  selected.style("opacity","0");
  var link = svg.selectAll(".link")
  link.style("opacity","0");
  d3.selectAll(".node,.link").transition()
  .duration(5000)
  .style("opacity",1);
  }
  }
  }  
  '
)


browsable(
  attachDependencies(
    tagList(
      tags$head(
        tags$link(
          href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css",rel="stylesheet"
        )
      ),HTML(
        '
        <div class="ui-widget">
        <input id="search">
        <button type="button">Search</button>
        </div>
        
        '     
      ),fn
    ),list(
      rmarkdown::html_dependency_jquery(),rmarkdown::html_dependency_jqueryui()
    )
  )
)%>% 
  htmltools::save_html("network.html")

这是在 R studio 中显示的输出：

这是保存后性能在 html 中的显示方式：

请帮我弄清楚这里发生了什么。我被困在这里两周了！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）