current position:Home>D3.js -- V7.0.0 - Draw a xAxis

D3.js -- V7.0.0 - Draw a xAxis

2021-08-27 04:59:26 Sir

stay D3.js Use in React draw x Axis

  • introduce d3
import * as d3 from 'd3';
import { select } from 'd3-selection';
 Copy code 
  • stay DOM Add svg

const svg = select('#line3').append('svg')
  .attr('width', 500).attr('height', 400)
  .style('border', '1px solid steelblue');
 Copy code 
  • add to x Axis
    • Here's the last step call(d3.axisBottom(x)) yes x The rendering position of the axis , Optional parameters : axisTop, axisLeft, axisRight.
const line = d3.line();

const xAxisLabel = [
  '1 month ', '2 month ', '3 month ', '4 month ', '5 month ', '6 month ',
  '7 month ', '8 month ', '9 month ', '10 month ', '11 month ', '12 month ',
];
const x = d3.scalePoint()
  //  Control here x Axis rendered text 
  .domain(xAxisLabel)
  //  This controls the horizontal position 
  .range([30, 470]);

svg.append('g')
  //  Here is the vertical position 
  .attr('transform', 'translate(0, 300)')
  .call(d3.axisBottom(x));
 Copy code 
  • design sketch

image.png

copyright notice
author[Sir],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827045923614U.html

Random recommended