[D3] Create Chart Axes with D3 v4

Posted 2020-10-01 Answer1215

Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons.

 

var margin = { top: 10, right: 20, bottom: 60, left: 25 };
var width = 425 - margin.left - margin.right;
var height = 625 - margin.top - margin.bottom;

var svg = d3.select(‘.chart‘)
  .append(‘svg‘)
    .attr(‘width‘, width + margin.left + margin.right)
    .attr(‘height‘, height + margin.top + margin.bottom)
  .append(‘g‘)
    .attr(‘transform‘, `translate(${margin.left}, ${margin.top})`);

svg.append(‘rect‘)
  .attr(‘width‘, width)
  .attr(‘height‘, height)
  .style(‘fill‘, ‘lightblue‘)
  .style(‘stroke‘, ‘green‘);

  /**
   * Create Y axis
   */
  // Set scale
  const yScale = d3.scaleLinear()
                    .domain([0, 100])
                    .range([height, 0]);
  // add y-axis  
  const yAxis = d3.axisLeft(yScale);
  // const yAxis = d3.axisLeft(yScale).ticks(10, ‘.1s‘);
  // If you want to add fine control about the ticks:
  // const yAxis = d3.axisLeft(yScale).tickValues([5,10,30,50,80,100]);
  // add to the svg
  svg.call(yAxis);    


  /**
   * Create X axis
   */
  const xScale = d3.scaleTime()
    .domain([new Date(2017, 6, 1),  new Date(2017, 7, 1)])
    .range([0, width]);

    //https://github.com/d3/d3-time
  const xAxis = d3.axisBottom(xScale)
    .ticks(d3.timeDay.every(4))
    .tickSize(10)
    .tickPadding(15);

  svg.append(‘g‘)
        .attr(‘transform‘, `translate(0, ${height})`)
     .call(xAxis);