networkD3 forceNetwork: 如何更改图例文本颜色、文本标签颜色，以及将文本标签置于最前端？

Question

我正在尝试对使用networkd3中的forcenetwork在R中绘制的网络图进行一些调整。特别地，我想将文本标签颜色更改为黑色（或白色，适用于黑色背景），并将文本标签置于节点前面。标准选项使得读取文本标签变得非常困难，因为某些标签颜色太浅，而其他标签则被密集的节点群所遮挡。如果我可以更改图例文本颜色，那就太好了，这样我就可以灵活地更改背景颜色。如here中所指出的一种可能的解决方案是篡改一些未使用的参数。

forceNetwork(Links = MisLinks, Nodes = MisNodes,
   Source = "source", Target = "target",
   Value = "value", NodeID = "name",
   Group = "group", opacity = 0.8,
   linkDistance = 
     JS('function(){d3.select("body").style("background-color", "#DAE3F9");return 50;}'))

然而，由于缺乏JS知识，我不知道如何编写它或者它是否可行。

- Seamus Lam

---

forceNetwork 的设计考虑了使用不同的节点颜色（如社区），如果您想将所有节点重新着色为白色，只需使用 simpleNetwork 即可。 - JohnCoene

我并不想重新着色节点。我想要分离节点颜色和标签颜色。具体来说，我希望节点保留其特定于组的颜色，同时将所有文本标签颜色更改为黑色。 - Seamus Lam

我成功地通过修改networkD3库中的forceNetwork.js文件来改变图例文本颜色和标签文本颜色。有人知道是否可能将文本标签置于节点前面吗？ - Seamus Lam

@SeamusLam，你能发布一下你给标签上色的解决方案吗？ - rrs

@rrs，下面的答案提供了一种设置标签文本颜色的方法。 - CJ Yetman

Answer 1

您可以使用htmltools包添加自定义CSS来设置背景颜色、图例文本颜色和节点标签文本颜色。更改文本标签的z-order会更加复杂，因为您必须重新排序SVG内部的元素，而我不确定这是否值得。

library(networkD3)
library(htmltools)

browsable(
  tagList(
    tags$head(
      tags$style('
        body{background-color: #DAE3F9 !important}
        .nodetext{fill: #000000}
        .legend text{fill: #FF0000}
      ')
    ),
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacityNoHover = 1, 
                 fontSize = 12, legend = T, zoom = T)
  )
)

- CJ Yetman