How to show y-axis in d3.js?

@daisha 

To show the y-axis in d3.js, you can use the d3.axisLeft() or d3.axisRight() functions to create the y-axis generator. Here are the steps to follow:

1. Define the scales: You need to have a scale for the y-axis in order to map the data values to the y-axis range. You can use d3.scaleLinear(), d3.scaleLog(), or other scale functions depending on your data.

1
2
3

var yScale = d3.scaleLinear()
  .domain([0, maxYValue])  // Set the domain based on the range of your data
  .range([height, 0]);     // Set the range of the y-axis

1. Create the y-axis generator: Use the d3.axisLeft() or d3.axisRight() function to create the y-axis generator, passing in the yScale as an argument. You can customize the appearance of the axis by chaining additional methods such as .ticks(), .tickFormat(), etc.

1
2
3

var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(5);  // Set the number of ticks on the axis, optional

1. Append the y-axis to the SVG: Finally, append the y-axis to your SVG element by creating a new

1
2
3
4

svg.append("g")
  .attr("class", "y-axis")
  .call(yAxis)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Make sure to adjust the margin variable to leave space for the y-axis within your SVG. Also, apply appropriate CSS styles to the axes for proper visibility.

By following these steps, you should be able to display the y-axis in your d3.js visualization.