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

我刚开始创建Grafana插件。我决定使用grafana客户端react和D3js测试创建一个简单的插件脚本。我注意到，这种行为似乎与创建简单网页时有所不同。在每次调用render时，插件脚本的输出似乎没有被“清除”，因此会渲染多条直线和多个圆。我通过调整面板插件窗口和浏览器窗口的大小对此进行了测试。我已经搜索了更多的信息，但是找不到关于这个主题的任何信息

这是设计还是一个bug？我应该自己处理图像的清除吗

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;
      `,
      };
    });
  }

}

import React，{PureComponent}来自'React'；
从“@grafana/data”导入{PanelProps}；
从“类型”导入{SimpleOptions}；
从'@grafana/ui'导入{stylesFactory}；
从“情感”导入{css}；
从“d3”导入*作为d3；
导出接口MyPanelOptions{
someText：字符串；
}
导出类SimplePanel扩展了PureComponent{
公共节点：任意；
render（）{
返回this.node=node}
宽度={this.props.width}height={this.props.height}viewBox=“0 0 1000”>
}
componentDidMount（）{
这个.createSVG（）；
}
componentDidUpdate（）{
这个.createSVG（）；
}
createSVG（）{
const{height，width}=this.props；
让svg=d3.select（this.node）；
svg.append（“行”）
.attr（“x1”，0）
.attr（“x2”，宽度）
.attr（“y1”，0）
.attr（“y2”，高度）
.attr（“笔划”、“黄色”）；
svg.append（“圆”）
.attr（“cx”，宽度）
.attr（“cy”，高度）
.attr（“r”，20）
.attr（“笔划”、“红色”）；
}
getStyles（）{
返回样式工厂（（）=>{
返回{
包装器：css`
位置：相对位置；
`,
svg:css`
位置：绝对位置；
排名：0；
左：0；
`,
文本框：css`
位置：绝对位置；
底部：0；
左：0；
填充：10px；
`,
};
});
}
}