在 networkD3 的 sankeyNetwork 图中启用节点的水平移动

Question

我从 Internet (link) 中找到了这张图片，我认为它是用 R 绘制的。我试图重现这张图，并使其与上述链接中的一张或多或少相似。我使用的代码如下：

    ID <- 0:24
    NodeGroup <- c(rep(1,8),2,5,rep(4,7),3,5,6,6,7,7,8,9)
    name <- c("29581k","5279k","4218k","1917k","1356k","Ventas diversas: 116","Venta diversa: 97","Venta de: 141","Venta totales: 42705","Contribucion marginal: 18183", "17531k","1744k","1326k","1208k","526k","459k","14k","IIBB: 1714","Costo: 22808","Gastos directos: 6734","Gastos distribudos: 2958","Resultado: 8851","Total Gastos: 9332","Imp. Gcias: 3098","Resultado Netto: 5.753")      

    nodes <- data.frame(ID, name, NodeGroup)
    nodes$NodeGroup <- as.character(nodes$NodeGroup)
    source <- c(0:7, rep(8,9), 10:16, rep(9,3), 19, 20, 21, 21)
    target <- c(rep(8,8), 17, 10:16, 9, rep(18,7), 19:21, rep(22, 2), 23, 24)
    value <- c(29581,5279,4218,1917,1356,116,97,141,1714,17531,1744,1326,1208,526,459,14,18138,17531,1744,1326,1208,526,459,14,6374,2958,8851,6374,2958,3098,5753)
    group <- c(1:8, rep(9,8), 10, rep(19,7), rep(18,3), rep(23,2), rep(22,2))
    links <- data.frame(source, target, value, group)
    links$group <- as.character(links$group)
    sn <- sankeyNetwork(Links=links, Nodes=nodes, Source='source', Target='target',
                Value='value', NodeID='name', fontSize=18, 
                NodeGroup = "NodeGroup",
                sinksRight = FALSE, 
                LinkGroup = "group",
                #nodeWidth = 40,
                #width=1500, height=500,
                #margin = list("right"=250),
                iterations = FALSE)
     sn

通过links，不仅可以垂直更改节点的位置，还可以水平更改节点的位置。我们可以在 R 中实现它吗？

更新 1：我可以通过使用links 提供的代码更改 sankeyNetwork.js 的源代码来解决问题 2。我不知道如何通过htmlwidgets 来实现它（我对 JS 不熟悉；因此，只是反复试验！）。我只需要将以下代码复制到 sankeyNetwork.js 的末尾即可。

function dragmove(d) {
    d3.select(this).attr("transform", 
        "translate(" + (
           d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
           ) + "," + (
           d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
           ) + ")");
    sankey.relayout();
    link.attr("d", path);
}

Answer 1

要实现节点的水平移动以及垂直移动，您可以调整 d3noob 的代码以使其正常工作，但这并不像只添加它们的 dragmove 函数声明那么容易。

1. 它是使用 D3v3 编写的，networkD3 使用 D3v4...而且它们并不完全兼容。
2. 该函数引用了在别处定义的一堆对象，因此如果不知道它们是什么，该函数本身就无法工作：width、height、sankey、link 和 path .

这是使其适应工作的一种方法...

library(networkD3)
library(htmlwidgets)

ID <- 0:24
NodeGroup <- c(rep(1,8),2,5,rep(4,7),3,5,6,6,7,7,8,9)
name <- c("29581k","5279k","4218k","1917k","1356k","Ventas diversas: 116",
          "Venta diversa: 97","Venta de: 141","Venta totales: 42705",
          "Contribucion marginal: 18183", "17531k","1744k","1326k","1208k",
          "526k","459k","14k","IIBB: 1714","Costo: 22808",
          "Gastos directos: 6734", "Gastos distribudos: 2958","Resultado: 8851",
          "Total Gastos: 9332","Imp. Gcias: 3098","Resultado Netto: 5.753")      

nodes <- data.frame(ID, name, NodeGroup)
nodes$NodeGroup <- as.character(nodes$NodeGroup)
source <- c(0:7, rep(8,9), 10:16, rep(9,3), 19, 20, 21, 21)
target <- c(rep(8,8), 17, 10:16, 9, rep(18,7), 19:21, rep(22, 2), 23, 24)
value <- c(29581,5279,4218,1917,1356,116,97,141,1714,17531,1744,1326,1208,526,
           459,14,18138,17531,1744,1326,1208,526,459,14,6374,2958,8851,6374,
           2958,3098,5753)
group <- c(1:8, rep(9,8), 10, rep(19,7), rep(18,3), rep(23,2), rep(22,2))
links <- data.frame(source, target, value, group)
links$group <- as.character(links$group)
sn <- sankeyNetwork(Links=links, Nodes=nodes, Source='source', Target='target',
                    Value='value', NodeID='name', fontSize=18, 
                    NodeGroup = "NodeGroup",
                    sinksRight = FALSE, 
                    LinkGroup = "group",
                    #nodeWidth = 40,
                    #width=1500, height=500,
                    #margin = list("right"=250),
                    iterations = FALSE)

onRender(sn,
         '
  function(el, x) {
    var sankey = this.sankey;
    var path = sankey.link();
    var nodes = d3.selectAll(".node");
    var link = d3.selectAll(".link")
    var width = el.getBoundingClientRect().width - 40;
    var height = el.getBoundingClientRect().height - 40;

    window.dragmove = function(d) {
      d3.select(this).attr("transform", 
        "translate(" + (
           d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
            ) + "," + (
            d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
          ) + ")");
      sankey.relayout();
      link.attr("d", path);
    };

    nodes.call(d3.drag()
      .subject(function(d) { return d; })
      .on("start", function() { this.parentNode.appendChild(this); })
      .on("drag", dragmove));
  }
  '
)