Search code examples
d3.jsaxis-labelssankey-diagram

How can I add axis labels to a sankey diagram in d3?

I want to add axis on a sankey diagram. The code for the chart can be found in the following links: https://github.com/irbp005/d3SankeyAndLineInteraction

The visual representation of the char is as follows: enter image description here

Ans I want to add labels like:

enter image description here

Basically in both sides of the y axis. Any ideas on how can I achieve this?

Solution

  • This should be fairly straightforward. Add a g element for each side and apply a translation transform to position it in the x axis and then use something along the lines of this:

    selection.append("text")
      .attr("class", "axis-label")
      .attr("transform", "rotate(-90)")
      .attr("y", -50)
      .attr("x", -height/2)
      .attr("fill", "#000")
      .style("text-anchor", "middle")
      .text("Y Label");

    Look through the 1st example in Chapter 1 here that explains the addition of X and Y labels to the plot axes: https://leanpub.com/d3-t-and-t-v4/read