rsankey-diagramnetworkd3

how to customize node & edge position in sankeyNetwork using R

the sankeyNetwork from networkD3 package is pretty clever most of the times at positioning the nodes, but there are occasions that I want to place the node to another location horizontally. There are also other occasion that I want to vertically move the start point of an edge. Take the following screen shot for example:

enter image description here

For the node, I want to move the B3 on the 2nd column from the right to the 4th column from the left. Similarly, I want to move the B4 from the 2nd column from the right to the 5th column from the left.

For the edge, I want to move the start point of the very first edge (B1->B11) to the low end of B1.

My guess is that I need to make some changes to the source code and manually put in the specific positions. I saw this post for js How to tune horizontal node position in d3 sankeyjs, but I'm not sure what to do in R, beside I did not find any post talking about changing the edge positions.

Here is the replicable data and code:

   load(url("https://github.com/bossaround/question/raw/master/sankeyexample.RData"))
      # nn is the node, ee is the edge, now create the link (ll)      
      ll <- inner_join(ee, nn, by = c("N1"="name")) %>%
        rename(source_ID = ID) %>%
        inner_join(nn, by = c("N2"="name")) %>%
        rename(target_ID = ID) 

      # Create Sankey Plot
       sankeyNetwork(
        Links = ll,
        Nodes = nn,
        Source = "source_ID",
        Target = "target_ID",
        Value = "Value",
        NodeID = "newname",
        fontSize = 12,
        nodeWidth = 40,
        nodePadding = 20,
        NodeGroup = "newname"

      )

Thank you in advance!

Solution

    1. You can manually adjust the vertical position of nodes, so if you drag the top-right B11 node to the bottom, the link line from the top-left B1 node will automatically adjust to the bottom of that B1 node.

    2. To achieve what's described in the answer to How to tune horizontal node position in d3 sankey.js?, all you have to do is add the sinksRight = FALSE parameter to your sankeyNetwork() call, though I don't think that achieves what you actually want.

    3. Manually adjusting the horizontal position of nodes is not currently possible. Adjusting them individually in code would be very tedious, but you could add additional JS to run after it loads to individually adjust the positioning of specific nodes with some convoluted JS code like d3.selectAll(".node").filter(function(d) { return d.name == "B3" }).attr("transform", function(d) { return "translate(" + (d.x - 300) + "," + d.y + ")"; })