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

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

2021-08-26 00:21:51 Sir

stay React Use in D3.js Draw a graph

  • introduce  d3

    • import * as d3 from 'd3';
    • import { select } from 'd3-selection';
  • stay DOM Add svg
const svg = d3.select('#line3')
  .append('svg')
  .attr('width', 500)
  .attr('height', 400)
  .style('border', '1px solid steelblue');
 Copy code 
  • add to x Axis And y Axis

const y = d3.scaleLinear()
  .domain([0, 100])
  .range([370, 20]);

const x = d3.scalePoint()
  .domain([' Shanghai ', ' Shenzhen ', ' Hangzhou ', ' zhuhai ', ' Suzhou ', ' zhongshan ', ' wuxi ', ' nanjing ', ' Hong Kong '])
  .range([0, 400]);

svg.append('g')
  .attr('transform', 'translate(30, 0)')
  .call(d3.axisLeft(y));

svg.append('g')
  .attr('transform', 'translate(30, 370)')
  .call(d3.axisBottom(x));
 Copy code 
  • drawing
const list = [
      [30, 340], [80, 320], [130, 330], [180, 310],
      [230, 330], [280, 310], [330, 350], [380, 330], [430, 360],
    ];
    svg.append('path')
      .attr('d', line(list))
      .attr('stroke', 'steelblue')
      .attr('fill', 'none');
 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/20210826002149754t.html

Random recommended