D3.js v5.0 散点图

数据结构：
[
{
“name”: ‘’,
“x”: ‘’,
“y”:’’
},
]

import * as d3 from 'd3';

export default function scatter(id, data) {
   
  const width = 600;
  const height = 400;
  const margin = {
    top: 20, right: 30, bottom: 30, left: 60 };
  const svg = d3
    .select(id)
    .append('svg')
    .attr('class', 'mainBubbleSVG')
    .attr('width', width)
    .attr('height', height);
    //比例尺
  const x = d3
    .scaleLinear()
    .domain(d3.extent(data, d => d.x))
    .nice()
    .range([margin.left, width - margin.right]);
  const y = d3
    .scaleLinear()
    .domain(d3.extent(data, d => d.y))
    .nice()
    .range([height - margin.bottom, margin.top]);
    //坐标轴
  const xAxis = g =>
    g
      .attr('transform', `translate(0,${
     height - margin.bottom})`)
      .call(d3.axisBottom(x))
      .call