2

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?

Selrac
  • 2,203
  • 9
  • 41
  • 84

1 Answers1

3

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

HamsterHuey
  • 1,223
  • 10
  • 11
  • You'll likely also have to move the existing chart to the right and make the width shorter to give room on the SVG for the text boxes. I suggest having variable to store its dimensions, e.g. ´var chartBox = { x: 50, y: 0, width: svgWidth - 100, height: svgHeight}´ – Matthew Wilcoxson Jan 10 '17 at 09:40
  • 2
    Agreed Matthew. I couldn't tell how the OP had things setup from the posted code so it was difficult to provide anything more concrete. I typically use the [recommended convention for margins](https://bl.ocks.org/mbostock/3019563) and add to the left and right padding to make room for any labels that are outside the "plot" area. – HamsterHuey Jan 10 '17 at 09:49