d3 svg绘制 ECG心电图网格 耗时＜10ms

// 绘制心电图网格
drawGrid(width = 1080, height = 1080) {
  const w = 20; // 一个5小格的宽度
  const pattern = this.g
    .append("defs")
    .append("pattern")
    .attr("id", "grid")
    .attr("patternUnits", "userSpaceOnUse")
    .attr("width", w) //设定宽度
    .attr("height", w); //设定宽度
  for (let i = 0; i < 6; i++) {
    const color = "05".includes(i) ? "#f0adaa" : "#f1dedf";
    // x line
    pattern
      .append("line")
      .attr("stroke", color)
      .attr("stroke-width", "1")
      .attr("x1", "05".includes(i) ? 0 : 1)
      .attr("y1", (w / 5) * i + 0.5)
      .attr("x2", w)
      .attr("y2", (w / 5) * i + 0.5);
    // y line
    pattern
      .append("line")
      .attr("stroke", color)
      .attr("stroke-width", "1")
      .attr("x1", (w / 5) * i + 0.5)
      .attr("y1", 1)
      .attr("x2", (w / 5) * i + 0.5)
      .attr("y2", w);
  }

  this.g
    .append("rect")
    .attr("width", width + 1)
    .attr("height", height + 1)
    .attr("fill", "url(#grid)");
},