Поместите разрыв строки в метки узлов на диаграмме Санки сети D3

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

Обновление: я думаю, что ответ на мой вопрос заключается в том, что вы не можете вставлять разрывы строк. Коллега указал мне, что метки узлов являются блоками SVG, которые не поддерживают разрывы строк.

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

Как сделать разрыв строки в метках узлов для диаграммы Санки, созданной с использованием пакета networkD3 R?

Заимствуя пример из Поместите текстовые значения справа от диаграммы Санки Я могу добавлять значения к таблицам:

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)

or

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

Но я не смог заставить что-либо работать, а мой JavaScript слишком ржавый, чтобы пытаться исправить его после того, как он будет создан.


person edsherman    schedule 22.06.2017    source источник
comment
Вы правы ... метки узлов - это текстовые элементы SVG, и они изначально не поддерживают разрывы строк. Есть способы добиться этого, но, вероятно, не без изменения базового JavaScript в networkD3. Если вы считаете, что это достойная и широко полезная функция, отправьте запрос на эту функцию на странице github.com/christophergandrud/networkD3 / issues   -  person CJ Yetman    schedule 30.06.2017


Ответы (1)


Вы можете заменить текстовые элементы SVG на <foreignObject> блоки текста / 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; })
  }
  '
)

введите описание изображения здесь

person CJ Yetman    schedule 08.09.2018