在React上使用D3为不同的组件绘制相同的SVG

Question

我正在尝试使用D3为我的React应用创建可视化。我想要一个基本的可视化并使用不同的组件进行绘制。我按照建议here绘制了基本组件。

export default class Pitch extends Component {
  constructor() {
    super();

    this.draw = this.draw.bind(this);
  }

  componentDidMount() {
    this.draw(this.props);
  }

  shouldComponentUpdate() {
    return false;
  }

  componentWillReceiveProps(nextProps) {
    d3.select('.pitch > *').remove();
    this.draw(nextProps);
  }

  render() {
    return (
      <div className="pitch"/>
    )
  }

  draw() {
    const element = d3.select('.pitch').node();

    d3.select('.pitch').append('svg')
      .attr('height', height)
      .attr('width', width)
      .append("g");
      .append('rect')
      .attr('width', '300px')
      .attr('height', '300px')
      .style('background-color', 'green');
  }

}

现在，我想在同一div上绘制一些其他内容。问题在于，如果我创建另一个组件，则必须在render方法中添加另一个div，而我将无法选择在该组件中创建的同一SVG。

在这种情况下我该怎么办？