如何向 link 和节点标签添加美元符号？

Question

我想在 networkD3 Sankey 图中的 link 和节点标签上添加一个美元符号。在这里提出并回答了类似的问题：

Link value label thousands separator

在上面的link中，CJ用htmlwidgets::onRender重写了link个标题，将千位分隔符从“,”改为“.”。

很遗憾，我不明白 JavaScript，也不知道如何更改解决方案来解决我的问题。

编辑

尝试将 CJ Yetman 的技术应用于节点。我的代码无效。

customJS <- '
function(el,x) {
    var node = d3.selectAll(".node");

    var format = d3.format("($,.2f");

    node.select("title").select("body")
        .html(function(d) { return "<pre>" + d.target.name + "<br>" + format(d.value) + "<pre>"; });
}
'

欢迎提出建议和指正。

Answer 1

对于节点，您可以在将数据框传递给 sankeyNetwork() 之前将“$”添加到数据框中的字符串，例如...

nodes <- data.frame(name = c("$a", "$b"))

对于链接，您可以在此处的 JavaScript 命令中将格式字符串 (format specification documented here) 调整为您需要的任何内容...

var format = d3.format("$");

总的来说，看起来像这样...

library(networkD3)
library(htmlwidgets)

nodes <- data.frame(name = c("$a", "$b"))
links <- data.frame(source = c(0), target = c(1), value = c(12000))

p <- sankeyNetwork(
  Links = links,
  Source = "source",
  Target = "target",
  Value = "value",
  Nodes = nodes,
  NodeID = "name",
  fontSize = 12,
  nodeWidth = 30,
  iterations = 0
)

customJS <- '
function(el,x) { 
    var link = d3.selectAll(".link");

    var format = d3.format("$");

    link.select("title").select("body")
        .html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
            "\n" + format(d.value) + "<pre>"; });
}
'

onRender(p, customJS)

Answer 2

我使用 CJ Yetman 的代码更改了 var format 以获得以下格式。

原始 -> CJ Yetman -> 我的编辑
12000 -> 12000 美元 -> 12,000.00 美元

customJS <- '
function(el,x) {
    var link = d3.selectAll(".link");

    var format = d3.format("($,.2f");

    link.select("title").select("body")
        .html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
            "\n" + format(d.value) + "<pre>"; });
}
'

我还使用了 CJ Yetman 的回答 here 来使用 onRender 在 shiny 中应用 customJS。

如何向 link 和节点标签添加美元符号？

How can I add a dollar sign to link and node labels?

r

sankey-diagram

networkd3

htmlwidgets