从 networkD3 的 forceNetwork 调整绘图的背景图片和标题

Question

在 post 之后，，我正在尝试从本地驱动器添加一张图片作为背景图片，并为图表添加一个标题。

然而，这些行似乎没有生效：

Background:    .style("background-image", "url(C:\Desktop\BGP.png)")
Title:          htmlwidgets::prependContent(htmltools::tags$h1("Title"))

添加它们的正确方法是什么？另外，有没有办法调整标题文本的字体样式和大小？

library(networkD3)
library(htmlwidgets)

subNodes <- 
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             nodeName nodeGroup     nodeSize
             Bob      NorthAmerica  10
             Alice    NorthAmerica  10
             Tom      China         10
             John     Japan         10
             ")

subLinkList <-
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             root  children  linkValue
             0     1         1
             0     2         1
             0     3         1
             ")

linkJS <- JS('
  function(){
             d3.select("body")
             .style("background-image", "url(C:\Desktop\BGP.png)")
             .style("background-repeat", "no-repeat")
             .style("background-position", "right bottom")
             return 100;
             }')

network <- forceNetwork(Links = subLinkList, Nodes = subNodes,
               Source = "root", Target = "children",
               Value = "linkValue", NodeID = "nodeName",
               Group = "nodeGroup", 
               opacity = 1, Nodesize = "nodeSize",
               legend = TRUE, linkDistance = linkJS,
               colourScale = JS("d3.scaleOrdinal(d3.schemeCategory20)"))

network1 <- htmlwidgets::onRender(
  network,
  'function(el, x) { 
  d3.selectAll(".legend text").style("fill", "white");
  d3.select("body").style("background-color", "#144370");
  }',
  htmlwidgets::prependContent(htmltools::tags$h1("Title"))
)


saveNetwork(network1, "c:\forceNetwork.html", selfcontained = TRUE)

Answer 1

这是一个可重现的示例，它添加了标题、标题样式、图例文本样式、更改背景颜色，并尝试使用本地文件设置背景图像。（我无法测试背景图片，因为它取决于许多特定因素，但它可能对你有用。）...

library(networkD3)
library(htmlwidgets)

subNodes <- 
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             nodeName nodeGroup     nodeSize
             Bob      NorthAmerica  10
             Alice    NorthAmerica  10
             Tom      China         10
             John     Japan         10
             ")

subLinkList <-
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             root  children  linkValue
             0     1         1
             0     2         1
             0     3         1
             ")

network <- forceNetwork(Links = subLinkList, Nodes = subNodes,
                        Source = "root", Target = "children",
                        Value = "linkValue", NodeID = "nodeName",
                        Group = "nodeGroup", 
                        opacity = 1, Nodesize = "nodeSize",
                        legend = TRUE)

network <- htmlwidgets::prependContent(network, htmltools::tags$h1("Title"))

network <- htmlwidgets::onRender(
  network,
  'function(el, x) { 
    d3.selectAll(".legend text").style("fill", "white");
    d3.select("body").style("background-color", "#144370");
    d3.select("h1").style("color", "red").style("font-family", "sans-serif");
    d3.select("body")
      .style("background-image", "url(file://C:\Desktop\BGP.png)")
      .style("background-repeat", "no-repeat")
      .style("background-position", "right bottom");
  }'
)


saveNetwork(network, "~/Desktop/forceNetwork.html", selfcontained = TRUE)

从 networkD3 的 forceNetwork 调整绘图的背景图片和标题

Adjust background picture and title for plot from networkD3's forceNetwork

javascript

r

d3.js

networkd3

htmlwidgets