在networkD3桑基图中，如何给节点标签添加换行？

Question

++++++++++++++++

更新： 我认为我的问题的答案是不能添加换行符。一位同事指出节点标签是SVG块，不支持换行符。

++++++++++++++++

如何在使用networkD3 R软件包生成的桑基图中的节点标签中添加换行符？

借鉴来自Place text values to right of sankey diagram的示例，我可以向标签添加值：

library(networkD3)
library(data.table)
set.seed(1999)
links <- data.table(
  src = rep(0:4, times=c(1,1,2,3,5)),
  target = sample(1:11, 12, TRUE),
  value = sample(100, 12)
)[src < target, ]  # no loops
nodes <- data.table(name=LETTERS[1:12])

#### Need to hover to get counts
##sankeyNetwork(Links=links, Nodes=nodes, Source='src', Target='target',
##  Value='value', NodeID='name', fontSize=16)

## Add text to label
txt <- links[, .(total = sum(value)), by=c('target')]
nodes[txt$target+1L, name := paste0(name, ' (', txt$total, ')')]

## Displays the counts as part of the labels
sankeyNetwork(Links=links, Nodes=nodes, Source='src', Target='target',
  Value='value', NodeID='name', fontSize=16, width=600, height=300)

我希望可以天真地调整paste0，以包含换行符，例如：

 name := paste0(name, "\n ", txt$total)

name := paste0(name, "<br/> ", txt$total)

但是我一直无法使任何东西正常运行，而且我的 JavaScript 过于生疏，无法尝试修复它一旦出现问题。

- edsherman

---

你是正确的......节点标签是SVG文本元素，它们本身不支持换行。虽然有方法可以实现它，但可能需要修改networkD3中基础JavaScript代码。如果你认为这是一个值得且广泛使用的功能，请在https://github.com/christophergandrud/networkD3/issues上提交需求请求。 - CJ Yetman

Answer 1

你可以用 <foreignObject> 块替换SVG文本元素，以显示文本/HTML。这个例子需要大量的额外格式化/定位才能有用，但它证明了这是可能的...

library(networkD3)
library(htmlwidgets)
library(data.table)

set.seed(1999)
links <- data.table(
  src = rep(0:4, times=c(1,1,2,3,5)),
  target = sample(1:11, 12, TRUE),
  value = sample(100, 12)
)[src < target, ]  # no loops
nodes <- data.table(name=LETTERS[1:12])

## Add text to label
txt <- links[, .(total = sum(value)), by=c('target')]
nodes[txt$target+1L, name := paste0(name, '<br>(', txt$total, ')')]

## Displays the counts as part of the labels
sn <- sankeyNetwork(Links=links, Nodes=nodes, Source='src', Target='target',
              Value='value', NodeID='name', fontSize=16, width=600, height=300)

onRender(sn,
         '
  function(el,x) {
    d3.selectAll(".node text").remove()
    d3.selectAll(".node")
      .append("foreignObject")
      .attr("width", 100)
      .attr("height", 50)
      .html(function(d) { return d.name; })
  }
  '
)

- CJ Yetman