Use d3.js to draw rectangles in React

  • The introduction of d3

    • import * as d3 from 'd3';
    • import { select } from 'd3-selection';
  • Add SVG to the DOM
const svg = select('#line3').append('svg')
  .attr('width', 500).attr('height', 400)
  .style('border', '1px solid steelblue')
  .style('border-radius', '4px')
  .style('background-color', '#f5f5f5');
      
svg.append('circle');
  svg.append('circle');
  svg.append('circle');
Copy the code
  • Draw three points
const list = [
  { x: 40, y: 60, r: 5 },
  { x: 70, y: 60, r: 10 },
  { x: 120, y: 60, r: 15 },
];
list.map(item => console.log(item.x));
const circle = selectAll('circle')
  .data(list)
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .attr('r', d => d.r)
  .attr('fill', 'steelblue');
Copy the code
  • rendering