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

Posted 2023-02-22

【中文标题】在同一个 div 中渲染 Reactjs 多个“d3js”子组件

【英文标题】：Rendering Reactjs multiple "d3js" child components in the same div

【发布时间】：2018-08-12 03:46:38

【问题描述】：

我正在尝试为我的每个 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");

我应该如何在子组件中更改它？我需要更改父渲染功能吗？

【参考方案1】：

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

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

【讨论】：

啊，这是一个愚蠢的错误！谢谢！现在这两个 SVG 在同一个 div 中。但它仍然将它们分开绘制。我应该如何在图表周围制作甜甜圈？！我认为现在它更像是 html 和 CSS 问题，而不是 Reactjs！

是的，现在肯定是一个 css 问题，没有 svg 很难找到解决方案，你能创建一个快速的 plunker 吗？