RnetWorkD3Sankey-通過js添加百分比不起作用

我正在networkD3::sankeyNetwork()使用以下示例資料和腳本在 R 中創建一個 sankey 圖表。我想顯示除節點標簽之外的百分比。

我創建的具有完整資料集的 sankey 有 8 層。我只是在下面的代碼中發布了一段資料。

library("networkD3")
library("htmlwidgets")
library("dplyr")

a <- read.csv(header = TRUE, text = "
date,dataCenter,customer,companyID,source,target,value
2021/11/3,dc1,customer1,companyID1,view_page_modulepicker_1,view_manage_opportunities_2,1
2021/11/3,dc1,customer1,companyID1,view_manage_opportunities_2,scroll_down_3,4
2021/11/3,dc1,customer1,companyID1,scroll_down_3,show_more_4,6
2021/12/6,dc1,customer1,companyID1,view_page_capabilityportfolio_1,view_card_detail_assignment_2,1
2021/12/7,dc2,customer2,companyID2,view_page_modulepicker_1,view_manage_opportunities_2,1
2021/12/8,dc3,customer3,companyID3,view_page_actionsearch_1,view_manage_opportunities_2,1
2021/12/9,dc2,customer1,companyID1,view_page_modulepicker_1,view_card_detail_assignment_2,1
2021/12/9,dc1,customer1,companyID1,view_page_modulepicker_1,view_card_detail_role_2,
2021/12/9,dc1,customer1,companyID1,view_page_modulepicker_1,view_detail_assignment_2,
2021/12/2,dc1,customer1,companyID1,view_page_homepage_1,view_card_detail_role_2,1
2021/12/2,dc1,customer1,companyID1,view_page_actionsource_1,view_detail_role_2,1
2021/12/2,dc2,customer2,companyID2,view_page_actionsource_1,bounce,22
")

node_names <- unique(c(as.character(a$source), as.character(a$target)))
nodes <- data.frame(name = node_names)
links <- data.frame(source = match(a$source, node_names) - 1,
                    target = match(a$target, node_names) - 1,
                    value = a$value)

# group by source and calculate the percentage of each node
g <- a %>%
  group_by(source) %>%
  summarize(cnt = n()) %>%
  mutate(freq = round(cnt / sum(cnt) * 100, 2)) %>%
  arrange(desc(freq))


nodes$name <- sub('(.*)_\\d ', '\\1', nodes$name)
links$linkgroup <- "linkgrp"
colourScale <- 
  'd3.scaleOrdinal()
     .domain(["linkgrp"])
     .range(["gainsboro"].concat(d3.schemeCategory20))'

p <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              fontSize = 9,
              fontFamily = "sans-serif", nodePadding=10,
              margin = list(t=100),
              sinksRight = FALSE, iterations = 0,
              LinkGroup = "linkgroup", 
              colourScale = colourScale)

showLabel_string <- 
  'function(el, x){
    d3.select(el).selectAll(".node text")
      .text(d => d.name   " ("   d.value   ")");}'

addTitle_string <-
  'function(el) { 
    var cols_x = this.sankey.nodes().map(d => d.x 15).filter((v, i, a) => a.indexOf(v) === i).sort(function(a, b){return a - b});
    cols_x.forEach((d, i) => {
    d3.select(el)
    .select("svg")
    .append("text")
    .attr("x", d)
    .attr("y", 0).text("step"   (i   1))
    .style("font-size", "12px")
    .style("font-family", "sans-serif")
    .style("text-orientation", "upright");})
  }'

p <- htmlwidgets::onRender(x = p, jsCode = showLabel_string)
p <- htmlwidgets::onRender(x = p, jsCode = addTitle_string)
p <- htmlwidgets::prependContent(p, htmltools::tags$h3("Opportunity Marketing User Behavior Monitor"))
p

現在我想顯示除每個節點標簽和計數之外的百分比。我已經通過下面的腳本計算了百分比值，但是如何將它放在節點標簽和計數之后？

我意識到下面計算每個節點百分比的方法是不正確的，因為當按“源”列分組時，最后一層中的節點被遺漏，因為它們僅作為“目標”節點作業。我在帖子中用一張新圖片更新了預期結果，這更清楚地顯示了百分比的顯示方式。一般來說，百分比應該遵循能量守恒。有可能實作嗎？

g <- a %>%
  group_by(source) %>%
  summarize(cnt = n()) %>%
  mutate(freq = round(cnt / sum(cnt) * 100, 2)) %>%
  arrange(desc(freq))

預期結果是

uj5u.com熱心網友回復：

您可以在創建nodeshtmlwidget后向 data.frame 添加變數（否則，sankeyNetwork()只會保留所需的列）。然后您可以編輯節點標簽文本的自定義代碼以包含百分比...

p$x$nodes <- g %>% 
  mutate(name = sub("_[0-9]", "", source)) %>% 
  select(name, freq) %>% 
  right_join(p$x$nodes, by = "name") %>% 
  mutate(freq = ifelse(is.na(freq), "", paste0(freq, "%")))

showLabel_string <- 
  'function(el, x){
    d3.select(el).selectAll(".node text")
      .text(d => d.name   " ("   d.value   ") "   d.freq);}'

標籤：javascript r d3.js 桑基图 网络d3

上一篇：D3條形圖負值未顯示

下一篇：在GUI中使用檔案處理與控制臺不同嗎？