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

时间:2018-09-09 15:43:39

标签: r sankey-diagram htmlwidgets networkd3

我从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);
}

1 个答案:

答案 0 :(得分:4)

要启用节点的水平移动以及垂直移动,您可以使d3noob的代码适应工作,但这并不像仅插入其dragmove函数声明那样简单。

  1. 它是使用D3v3编写的,networkD3使用D3v4 ...并且它们并不完全兼容。
  2. 该函数引用了在其他地方定义的一堆对象,因此,在不知道它们是什么的情况下,该函数本身无法工作:widthheightsankey,{{ 1}}和link

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

path