reactjs - 用 SVG 线连接反应组件

Question

我正在努力实现这一目标：

我的 api 提供了上层父元素的 id，所有级别都位于同一个 React 组件中（就像卡片一样）。

如何将不同级别的卡片与 SVG 线连接起来？

我以为我可以得到每张卡片的所有坐标，然后根据关系我可以创建起点和终点的线。但我不知道如何获取它们，在父组件中，我应该有任何 Card 组件的引用以便使用，getBoundingClientRect()尽管我没有找到将 N 引用存储在功能组件中的方法。

我还关心如何给连接器提供脚踝曲线。我目前正在使用 d3 绘制线条。

当前代码：

<Row style={{ position: 'relative' }}>
  <Col span={8}>
    <strong>TOP LEVEL</strong>
    <Divider />
    {data.length ? data[0].map(item => <ProductCard item={item} key={item.product_offer_id} />) : []}
  </Col>
  <Col span={8}>
    <strong>SUB LEVEL 1</strong>
    <Divider />
    {data.length ? data[1].map(item => <ProductCard item={item} key={item.product_offer_id} />) : []}
  </Col>
  <Col span={8}>
    <strong>SUB LEVEL 2</strong>
    <Divider />
    {data.length ? data[2].map(item => <ProductCard item={item} key={item.product_offer_id} />) : []}
  </Col>
  <svg id="svg1" style={{ margin: '0 auto', display: 'block', position: 'absolute' }}></svg>
</Row>

标签： reactjsd3.js