chart = {
  // append the svg object to the div of the page
  // read data

  let data = [
    { x: -0.44972, y: 0.1771, cell: "I1", lib: "S5" },
    { x: 0.19, y: 0.752, cell: "I1", lib: "S6" },
    { x: -0.21137, y: -0.2388, cell: "I1", lib: "S3" },
    { x: -0.0348, y: 0.01171, cell: "I1", lib: "S6" },
    { x: -0.357, y: 0.822, cell: "I1", lib: "S6" },
    { x: -0.2543, y: -0.3184, cell: "I1", lib: "S6" },
    { x: -0.1235, y: 0.2822, cell: "I3", lib: "S6" },
    { x: -0.43765, y: -0.34685, cell: "I1", lib: "S6" }
  ];
  // console.log(data);
  var margin = { top: 10, right: 30, bottom: 30, left: 40 },
    width = 1060 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;
  const svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "max-width: 100%; height: auto;")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

  // append the svg object to the body of the page
  var k = height / width;
  var x = d3
    .scaleLinear()
    .range([margin.left, width - margin.right])
    .domain([-1, 1]);
  var y = d3
    .scaleLinear()
    .range([height - margin.bottom, margin.top])
    .domain([-1, 1]);
  const colorScale = d3
    .scaleOrdinal()
    .domain([0, 1])
    .range(["#e31a1c", "#1f78b4", "#ff7f00", "#b2df8a", "#87843b", "#fb9a99"]);
-
  var tops = svg
    .selectAll(null) // 删除原来的路径
+
  const tops = svg
    .append("g");

  const stars = tops.selectAll() // 删除原来的路径
    .data(data)
    .enter()
    .append("g")
    .append("path")
    .attr("transform", (d) => `translate(${x(d.x)},${y(d.y)})`)
    .attr("d", d3.symbol(d3.symbolStar).size(300))
    .attr("fill", (d) => colorScale(d.lib));

  const zoom = d3.zoom().scaleExtent([0.5, 32]).on("zoom", zoomed);
  const gx = svg.append("g");
  const gy = svg.append("g");
  var yAxis = (g, y) =>
    g
      .call(d3.axisRight(y).ticks(12 * k))
      .call((g) => g.select(".domain").attr("display", "none"));
  var xAxis = (g, x) =>
    g
      .attr("transform", `translate(0,${height})`)
      .call(d3.axisTop(x).ticks(12))
      .call((g) => g.select(".domain").attr("display", "none"));
  svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
  function zoomed({ transform }) {
    const zx = transform.rescaleX(x).interpolate(d3.interpolateRound);
    const zy = transform.rescaleY(y).interpolate(d3.interpolateRound);
-
    tops.attr("transform", transform).attr("size", 300 / transform.k);
+
    tops.attr("transform", transform);
    stars.attr("transform", (d) => `translate(${x(d.x)},${y(d.y)})scale(${1/transform.k})`)
    gx.call(xAxis, zx);
    gy.call(yAxis, zy);
  }
  return svg.node();
}