在 forceNetwork 中为 networkD3 更改图例文本的颜色答案

【问题标题】：Change the color of the legend text in forceNetwork for networkD3在 forceNetwork 中为 networkD3 更改图例文本的颜色
【发布时间】：2018-06-04 09:53:34
【问题描述】：

使用networkD3 R 包中的forceNetwork，如何将图例中的文本颜色更改为白色？

我的代码：

library(networkD3)

forceNetwork(Links = subLinkList, Nodes = subNodes, 
             Source = "root", Target = "children", 
             Value = "linkValue", NodeID = "nodeName", 
             Nodesize = "nodeSize", Group = "nodeGroup", 
             colourScale = JS(colorScale), charge = -500, 
             opacity = 1, opacityNoHover = 1, fontSize = 25, 
             fontFamily = "Calibri",
             linkDistance = JS('function(){d3.select("body").style("background-color", "#144370");return 200;}'), 
             linkWidth = 3, linkColour = "white", 
             legend = TRUE, bounded = TRUE, zoom = TRUE)

我尝试了什么：

linkDistance = JS('function(){d3.select("body").style("background-color", "#144370").legend.text("fill", "white");return 200;}')

【问题讨论】：

嗨，Yetman，非常感谢您的帮助，我将尝试实施上述内容并从我的角度进行检查。

标签： javascript r d3.js htmlwidgets networkd3

【解决方案1】：

这是一个完全可复制的示例，使用比使用额外代码重载 linkDistance 参数更好的方法添加自定义 JavaScript...

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
  ")

colorScale <- "d3.scaleOrdinal(d3.schemeCategory20);"

fn <- forceNetwork(Links = subLinkList, Nodes = subNodes, 
             Source = "root", Target = "children", 
             Value = "linkValue", NodeID = "nodeName", 
             Nodesize = "nodeSize", Group = "nodeGroup",
             colourScale = JS(colorScale),
             charge = -500, opacity = 1, opacityNoHover = 1, fontSize = 25,
             fontFamily = "Calibri", linkDistance = 200,
             linkWidth = 3, linkColour = "white",
             legend = TRUE, bounded = TRUE, zoom = TRUE)

htmlwidgets::onRender(
  fn,
  'function(el, x) { 
    d3.select("body").style("background-color", "#144370");
    d3.selectAll(".legend text").style("fill", "white");
  }'
)

【讨论】：

您必须创建一个完全可重现的示例
如果没有您传递给forceNetwork 函数的数据，它就无法复制
另外，如果不清楚，您需要将我上面提出的linkDistance 对象使用linkDistance = linkDistance 传递给forceNetwork 函数。我更新了我的答案以更清楚地表明这一点。
我添加了一个完全可复制的示例，它使用了一种比重载 linkDistance 参数更好的方法来添加自定义 JavaScript。