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

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

2021-08-27 08:34:15 Sir

stay React Use in D3.js Draw a line

const svg = d3.select('#line3').append('svg');
const path = svg.append('path');

//  drawing 
const list = [
  [15, 50], [45, 69], [75, 40], [105, 70], [135, 30],
  [165, 70], [195, 30], [225, 65], [255, 55], [285, 77],
  [315, 58], [345, 79],
];
const line = d3.line().curve(d3.curveCardinal);
//  Below are all  curve  Options for 
// .curve(d3.curveLinear);
// .curve(d3.curveNatural);
// .curve(d3.curveMonotoneX);
// .curve(d3.curveCatmullRom.alpha(1));

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()
  .domain(xAxisLabel)
  .range([15, 345]);

svg.attr('width', 360).attr('height', 104)
  .style('border', '1px solid steelblue');
svg.append('g')
  .attr('transform', 'translate(0, 84)')
  .call(d3.axisBottom(x));

svg.selectAll('circle')
  .data(list)
  .join('circle')
  .attr('r', 3)
  .attr('cx', d => d[0])
  .attr('cy', d => d[1])
  .attr('fill', 'magenta');

// @ts-ignore
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/20210827083414011g.html

Random recommended