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

·  阅读 324
D3.js -- V7.0.0 - Draw a Chart with circle

在 React 中使用 D3.js 画折线图

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

// 画图
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);
// 下面都是 curve 的可选项
// .curve(d3.curveLinear);
// .curve(d3.curveNatural);
// .curve(d3.curveMonotoneX);
// .curve(d3.curveCatmullRom.alpha(1));

const xAxisLabel = [
  '1月', '2月', '3月', '4月', '5月', '6月',
  '7月', '8月', '9月', '10月', '11月', '12月',
];

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');
复制代码
  • 效果图

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改