How can I change the font size of link labels to a Sankey Diagram built with networkd3 in R?

Question

I was trying to add link labels to a sankey diagram as described by CJ Yetman in:

In R, how to display value on the links/paths of Sankey Graph?

library(htmlwidgets)
library(networkD3)

nodes <- data.frame(name = c("Node A", "Node B", "Node C", "Node D"))
        
links <- data.frame(
            source = c(0, 0, 1, 2),
            target = c(1, 2, 3, 3),
            value = c(10, 20, 30, 40))

p <- sankeyNetwork(
        Links = links, Nodes = nodes,
        Source = "source", Target = "target",
        Value = "value", NodeID = "name",
        fontSize = 20, nodeWidth = 30)

htmlwidgets::onRender(p, '
  function(el) { 
    var nodeWidth = this.sankey.nodeWidth();
    var links = this.sankey.links();

    links.forEach((d, i) => {
      var startX = d.source.x + nodeWidth;
      var endX = d.target.x;
      
      var startY = d.source.y + d.sy + d.dy / 2;
      var endY = d.target.y + d.ty + d.dy / 2;
      
      d3.select(el).select("svg g")
        .append("text")
        .attr("text-anchor", "middle")
        .attr("alignment-baseline", "middle")
        .attr("x", startX + ((endX - startX) / 2))
        .attr("y", startY + ((endY - startY) / 2))
        .text(d.value);
    })
  }
')

Now I want to change the font size of the labels. Also I would like to add axis labels and change the node labels to vertical labels.

Answer 1

You can change the font size of link labels by adding .style("font-size", "34px") to the end of the JavaScript/D3 chain...

htmlwidgets::onRender(p, '
  function(el) { 
    var nodeWidth = this.sankey.nodeWidth();
    var links = this.sankey.links();

    links.forEach((d, i) => {
      var startX = d.source.x + nodeWidth;
      var endX = d.target.x;
      
      var startY = d.source.y + d.sy + d.dy / 2;
      var endY = d.target.y + d.ty + d.dy / 2;
      
      d3.select(el)
        .select("svg g")
        .append("text")
        .attr("text-anchor", "middle")
        .attr("alignment-baseline", "middle")
        .attr("x", startX + ((endX - startX) / 2))
        .attr("y", startY + ((endY - startY) / 2))
        .text(d.value)
        .style("font-size", "34px");
    })
  }')

---

You can add axis labels with something like this (originally from How to add columnn titles in a Sankey chart networkD3)...

htmlwidgets::onRender(p, '
  function(el) { 
    var cols_x = this.sankey.nodes()
      .map(d => d.x).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", 12)
        .text("Step " + (i + 1));
    })
  }
')

---

You can make the node labels vertically with something like this (originally from Can I rotate the node labels in a Sankey Plot (networkD3::sankeyNetwork)?)...

htmlwidgets::onRender(p, '
  function(el) { 
    d3.select(el)
      .select("svg")
      .selectAll(".node text")
      .attr("text-anchor", "middle")
      .style("writing-mode", "vertical-rl")
      .style("text-orientation", "upright");
  }
')

---

and you can string them all together like this...

htmlwidgets::onRender(p, '
  function(el) { 
    // set link label font size
    var nodeWidth = this.sankey.nodeWidth();
    var links = this.sankey.links();

    links.forEach((d, i) => {
      var startX = d.source.x + nodeWidth;
      var endX = d.target.x;
      
      var startY = d.source.y + d.sy + d.dy / 2;
      var endY = d.target.y + d.ty + d.dy / 2;
      
      d3.select(el)
        .select("svg g")
        .append("text")
        .attr("text-anchor", "middle")
        .attr("alignment-baseline", "middle")
        .attr("x", startX + ((endX - startX) / 2))
        .attr("y", startY + ((endY - startY) / 2))
        .text(d.value)
        .style("font-size", "34px");
    })
    
    // set node text vertical
    d3.select(el)
      .select("svg")
      .selectAll(".node text")
      .attr("text-anchor", "middle")
      .style("writing-mode", "vertical-rl")
      .style("text-orientation", "upright");
    
    // set x-axis labels
    var cols_x = this.sankey.nodes()
      .map(d => d.x).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", 12)
        .text("Step " + (i + 1));
    })
  }
')