如何使用R中的rcv和networkD3包在D3 Sankey图的节点中添加图像？

如何解决如何使用R中的rcv和networkD3包在D3 Sankey图的节点中添加图像？

我正在使用R中的ranked-choice voting数据，并希望使用Sankey图（here是一个示例）对其进行绘制。 Sankey图默认为每个候选对象使用颜色编码的节点，但我想将每个候选对象的图像放置在节点内。

数据和设置

我有5位候选人：A，B，C，D和E，以及27位选民的优先次序（通过其ID：1、2、3，...，27标识）。这是我的初始数据：

rcv_data <- 

structure(list(pref_voter_id = 1:27,`1` = c("A","B","C","D","A","E","E"),`2` = c("C","B"
),`3` = c("B","D"),`4` = c("E","C"),`5` = c("D","A")),row.names = c(NA,-27L),class = c("tbl_df","tbl","data.frame"))

每个选民的第1、2、3、4、5列分别对应“第一选择”，“第二选择”，...，“第五选择”。

我正在使用networkD3包在R Markdown HTML文档中创建Sankey图。为了将数据转换成适用于networkD3::sankeyNetwork函数的格式（即，根据节点和边），需要使用rcv包和rcv::makde_d3list函数进行一些调整：

library(dplyr)
library(tidyr)
library(rcv)
library(networkD3)

rcv_data %>%
  pivot_longer(2:6,names_to = "vote_rank",values_to = "candidate") %>%
  rcv::rcv_tally(n_winners = 0) %>% # n_winners is 0 for the diagram to display an extra round
  filter(candidate != "NA") %>% # I don't want "NA" to appear in the diagram
  rcv::make_d3list() %>%
  {networkD3::sankeyNetwork(Links = .$values,Nodes = .$names,Source = "source",Target = "target",Value = "value",NodeID = "candidate",units = "voters",fontSize = 12,nodeWidth = 50)}

需要帮助

现在，我有一些文件A.jpg，B.jpg，C.jpg，D.jpg和E.jpg，其中包含5位候选人的照片。我希望这些节点包含这些候选人的照片，而不是简单地进行颜色编码，即，我不是深蓝色节点，而是候选人C的图像，而不是深橙色节点，而是候选人A等的图像。>

我怀疑有两种方法可能会导致解决方案：

1. networkD3::sankeyNetwork仅提供用于更改节点颜色的功能，但是使用其他R包可能有其他解决方法吗？我知道visNetwork包使人们可以将图像添加为节点，但是它似乎不支持Sankey图（？）。
2. 通过htmlwidgets::onRender函数，可以通过将图形保存到对象中来向该图形添加额外的JavaScript代码，例如graph <- [code above]，然后像htmlwidgets::onRender(graph,JS(...))那样编写JavaScript。但是，我不确定...部分应该包含什么内容-如何访问节点并将它们附加到按组的适当图像上？

解决方法

这里是将图像添加到SVG中的每个节点组的示例。仍然有许多问题需要解决，例如适当调整图像的大小和位置，但这为添加图像提供了基础。

library(networkD3)
library(htmlwidgets)
    
nodes <- data.frame(name = c("a","b","c","d"))
links <- data.frame(source = c(0,1,1),target = c(2,3,2,3),value = c(1,4)
                    )

sn <- sankeyNetwork(Links = links,Nodes = nodes,Source = "source",Target = "target",Value = "value",NodeID = "name")
    
js <- 
  '
    function(el) { 
      d3.select(el)
        .selectAll(".node")
        .append("image")
        .attr("xlink:href",d => "https://pngimg.com/uploads/letter_" + d.name + "/letter_" + d.name + "_PNG4.png")
    }
  '

htmlwidgets::onRender(sn,js)