Question

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

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 中的显示方式：

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

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

0 个答案: