使用“networkD3”更改桑基图的颜色字体

Question

我想更改彩色字体，或在字体中添加阴影以提高可见性。但是我还没有找到一种方法来做到这一点。一种替代方法是使用 plotly，但是当您将 plotly 对象放入闪亮的应用程序并在移动设备中可视化时 phone，您会丢失交互式标签，因此 networkD3 提供了更好的集成。唯一的问题是我很难个性化外观。我想更改字体颜色。

一个可重现的例子：

library(networkD3)
URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
              'master/JSONdata/energy.json')
energy <- jsonlite::fromJSON(URL)

# Plot
sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
              Target = 'target', Value = 'value', NodeID = 'name',
              units = 'TWh', fontSize = 12, nodeWidth = 30)

Answer 1

文本元素可以修改我从包 htmlwidgets 添加的 onRender 脚本。此函数允许您运行额外的 javascript 函数，用于 select 使用 D3 编辑和修改元素。函数的结构是：

p <- onRender(myplot,'function(el, x){ 
    ...
}')

使用示例，您可以使用 d3.selectAll select 标签（此 returns 每个元素；对单个元素或仅第一个元素使用 d3.select()）。

// Sankey selector for node labels
d3.selectAll(".node text")

可以使用 style('some prop', 'some value') 修改 <text> 元素的颜色。例如，假设我们要将文本更改为 blue.

d3.selectAll(".node text").style("fill", "blue") // or hex, rgb, hsl, etc.

使用上面的例子，你可以这样写。

library(networkD3)
URL <- 'https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json'
energy <- jsonlite::fromJSON(URL)

# Plot
sankey <- sankeyNetwork(
  Links = energy$links, Nodes = energy$nodes, Source = 'source',
  Target = 'target', Value = 'value', NodeID = 'name',
  units = 'TWh', fontSize = 12, nodeWidth = 30
)

# render with js
sankey_rendered <- htmlwidgets::onRender(sankey,
  'function(el, x) {
    d3.selectAll(".node text")
        .style("fill", "blue");
  }'
)

# show
sankey_rendered

如果您想对标签执行更多操作（即鼠标事件、点击），请将 D3 select 结果分配给一个变量。

var labels = d3.selectAll(".node text");

使用“networkD3”更改桑基图的颜色字体

Change color font of a Sankey Diagram with `networkD3`

r

networkd3