4

パッケージ内の最小限の例を使用して、networkD3プロットを作成するとします

#
library(networkD3)

# Load data
data(MisLinks)
data(MisNodes)

# Plot
forceNetwork(Links = MisLinks, Nodes = MisNodes,
            Source = "source", Target = "target",
            Value = "value", NodeID = "name",
            Group = "group", opacity = 0.8)

これをブラウザで開くと、開発者ツールを使用してボディの背景色を次のように変更できます。background-color: #DAE3F9;"

ブラウザーで開かずに、プロットの背景色 (デフォルトの白から) を別の色に自動的に定義する方法はありますか? 基本的に、JS 関数を追加できるように、コードに直接 CSS を追加できますか?

4

2 に答える 2

5

可能であれば、いくつかhtmltoolsの方法で からの助けを借りることができます。

library(networkD3)

# Load data
data(MisLinks)
data(MisNodes)

# Plot
forceNetwork(Links = MisLinks, Nodes = MisNodes,
             Source = "source", Target = "target",
             Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8)

library(htmltools)

# don't like using the !important modifier
#  but without script not sure there is another way
#  to override the default white background
browsable(
  tagList(
    tags$head(
      tags$style('body{background-color: #DAE3F9 !important}')
    ),
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8)
  )
)

# if you want to limit the background-color to
#  the htmlwidget, we could wrap in tags$div
browsable(
  tags$div(
    style = "background-color:#DAE3F9;",
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8)
  )
)

# if you are ok with script then we
#  we could do something like this
browsable(
  tagList(
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8),
    tags$script(
'
document.body.style.backgroundColor = "#DAE3F9"
'      
    )
  )
)
于 2016-03-28T02:59:43.490 に答える
1

これが私のハックです。きれいではありlinkDistanceませんが、汚い仕事をするために引数に関数を追加しました。願わくば、誰かが最終的にはより厄介なソリューションを提供してくれることを願っています。

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;}'))

同様に魅力的でない別のオプションは、clickAction引数 (例: clickAction = 'd3.select("body").style("background-color", "#DAE3F9")') を追加することですが、ユーザーがノードをクリックした場合にのみ背景が変更されます。

于 2016-03-21T17:23:32.853 に答える