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

我认为子组件中存在一个问题，我尝试了select("#container")，但它找不到它。所以我不得不使用select("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

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

1 个答案: