Grafana 插件 - 在渲染之间清除输出

Question

我是创建 Grafana 插件的新手。我决定使用 grafana-client、react 和 D3js 测试创建一个简单的插件脚本。我注意到该行为似乎与创建简单网页时的行为不同。看起来插件脚本的输出在每次调用渲染之间没有被“清除”，因此渲染了多条线和圆。我通过调整面板插件窗口和浏览器窗口的大小对此进行了测试。我搜索了更多信息，但找不到关于此主题的任何信息。

这是设计使然还是错误？我应该自己处理清除图像吗？

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { stylesFactory } from '@grafana/ui';
import { css } from 'emotion';
import * as d3 from 'd3';



export interface MyPanelOptions {
  someText: string;
}

export class SimplePanel extends PureComponent<PanelProps<SimpleOptions>> {
  public node: any;
 
  render() {
    return <svg ref={node => this.node = node}
      width={this.props.width} height={this.props.height} viewBox="0 0 1000 1000">
    </svg>

  }

  componentDidMount() {
    this.createSVG();
  }
  componentDidUpdate() {

    this.createSVG();
  }

  createSVG() {
  const { height, width } = this.props;

    let svg = d3.select(this.node);
    
    svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", 0)
    .attr("y2", height)
    .attr("stroke", "Yellow");

    svg.append("circle")
    .attr("cx", width)
    .attr("cy", height)
    .attr("r", 20)
    .attr("stroke", "red");

  }

  getStyles() {
    return stylesFactory(() => {
      return {
        wrapper: css`
        position: relative;
      `,
        svg: css`
        position: absolute;
        top: 0;
        left: 0;
      `,
        textBox: css`
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px;
      `,
      };
    });
  }

}