d3:axisBottom

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

JavaScript

const scale1 = d3.scaleLinear();

const width = 500;
const height = 200;
const marginBottom = 40;
const marginLeft = 50;
const marginRight = 50;

scale1.domain([0, 10]);
scale1.range([marginLeft, width - marginRight]);

const axisBottom = d3.axisBottom(scale1);

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .style('border', 'dashed 1px pink')

const axisGroup = svg.append('g').call(axisBottom);
axisGroup.attr('transform', `translate(0, ${height - marginBottom})`);