在同一个div中渲染Reactjs多个"d3js"子组件

Question

我正在尝试为我的每个d3js元素使用reactjs组件。父组件绘制图形，子组件应在其周围绘制圆环。但是现在渲染函数将它们分开绘制。下面的代码显示了如何将图形svg追加到父组件中（在componentDidMount（）内部）：

this.svg = select(this.container).append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .classed('network', true)
  .attr('transform', `translate(${width / 2},${height / 2})`);

以下是父组件渲染函数的代码：

  render() {
    return (
      <div>
        <div className="container" ref={(container) => { this.container = container; }} />
        <div className="donut" >
          <DonutComponent  />
        </div>
      </div>
    );
  }

我认为子组件中存在一个问题，我尝试了选择（#容器），但它找不到它。所以我不得不使用选择（"body"）将甜甜圈附加到一个单独的div：

  var svgContainer = select("body")
    .append("svg")
      .attr("width", width)
      .attr("height", height)
      .style("border", "1px solid");

我应该如何在子组件中更改它？是否需要更改父渲染函数？

Answer 1

您试图选择一个id，但您的容器是一个类。

select(".container") // this should works