如何将美元符号添加到链接和节点标签？答案

【问题标题】：How can I add a dollar sign to link and node labels?如何将美元符号添加到链接和节点标签？
【发布时间】：2021-07-11 14:38:31
【问题描述】：

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

Link value label thousands separator

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

不幸的是，我不懂 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>"; });
}
'

欢迎提出建议和指正。

【问题讨论】：

标签： r sankey-diagram htmlwidgets networkd3

【解决方案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)

【讨论】：

感谢您提供解决方案 CJ Yetman。非常感谢。

【解决方案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 在闪亮中应用 customJS。

【讨论】：