Use React to draw the x axis in d3.js

  • The introduction ofd3
import * as d3 from 'd3';
import { select } from 'd3-selection';
Copy the code
  • Add it to the DOMsvg

const svg = select('#line3').append('svg')
  .attr('width'.500).attr('height'.400)
  .style('border'.'1px solid steelblue');
Copy the code
  • Add the x axis
    • The last step herecall(d3.axisBottom(x))Is the render position of the X-axis, optional:axisTop, axisLeft, axisRight.
const line = d3.line();

const xAxisLabel = [
  '1 month'.'2 months'.'march'.'in April'.'may'.'June'.'July'.'August'.'September'.'October'.'November'.'12 months',];const x = d3.scalePoint()
  // This controls the text rendered on the X-axis
  .domain(xAxisLabel)
  // This controls the horizontal position
  .range([30.470]);

svg.append('g')
  // The vertical position here
  .attr('transform'.'translate(0, 300)')
  .call(d3.axisBottom(x));
Copy the code
  • rendering