将文本值放在sankey图的右侧 [英] Place text values to right of sankey diagram

问题描述

是否有技巧将文本放置在使用networkD3渲染的sankey图上?我希望端点的值以文本形式显示在其框的右侧.我意识到，将鼠标悬停在框上可以显示该值，但是随着框的变小，如果在侧面始终可以看到这些值，则在许多情况下更容易描绘信息.

Is there a trick to placing text on a sankey diagram rendered using networkD3? I would like to have the values of the endpoints be displayed as text to the right of their boxes. I realize that hovering over the boxes displays the value, but as the boxes get smaller it would be much easier in many cases to portray the information if the values were always visible on the side.

这里是一个例子；我可以通过将值添加为标签的一部分来破解它，但是最好将值显示在图的右侧.

Here is an example; I was able to kinda hack it by adding the values as part of the labels, but it would be much better to have the values displayed to the right of the 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)

推荐答案

对不起，我刚才遇到了这个问题.这对于htmlwidgets中新的onRender函数将是一个很好的用途.我试图对内联进行注释，以解释添加的两行JavaScript来移动节点文本.这些行中的networkD3过滤器根据宽度将位置更改为向右或向左.我们仅将其应用于所有文本，因此它将位于节点矩形的右侧.

Sorry, I just now ran across this. This would be a great use for the new onRender function in htmlwidgets. I tried to comment inline to explain the couple of lines of added JavaScript to move the node text. networkD3 filters in these lines to change the placement to right or left based on width. We will just apply this to all of the text so it will be to the right of our node rectangles.

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)



#################### move leaf node text right ################
# for this to work
#   install the newest htmlwidgets
#   devtools::install_github("ramnathv/htmlwidgets")

library(htmlwidgets)
#  add margin left since we'll need extra room
#   if you are wondering why margin left,
#   I think we just discovered a bug
sn <- sankeyNetwork(
  Links=links, Nodes=nodes, Source='src', Target='target',
  Value='value', NodeID='name', fontSize=16,
  width=600, height=300,
  # give us so room for our newly aligned labels
  margin = list("left"=100)
)
# see how it looks
sn

# now let's use the new htmlwidget function
#  onRender
onRender(
  sn,
'
function(el,x){
  // select all our node text
  var node_text = d3.select(el)
    .selectAll(".node text")
    //and make them match
    //https://github.com/christophergandrud/networkD3/blob/master/inst/htmlwidgets/sankeyNetwork.js#L180-L181
    .attr("x", 6 + x.options.nodeWidth)
    .attr("text-anchor", "start");
}
'
)

这篇关于将文本值放在sankey图的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！