如何在Angular 2+版本中绘制可点击的气泡图？

Question

我想在我的angular 6应用程序中绘制气泡图。而所有这些气泡（在X和Y轴上）都应该是可单击的，并且一旦用户单击它，它应该使用一条简单的线显示其多个孩子之间的关系。

那么有什么方法可以在Angular 6应用程序中实现此功能？

我在Google上搜索了很多。以下是我获得的链接，但所有这些链接都不是可单击的气泡图：

1. https://valor-software.com/ng2-charts/#BubbleChart
2. https://www.jqwidgets.com/angular-bubble-chart/
3. https://stackblitz.com/edit/amcharts3-angular-bubble-chart-demo-mzsbu8
4. https://www.syncfusion.com/angular-ui-components/angular-charts/chart-types/bubble-chart

任何答案或建议都会对我有很大帮助，因为这是我所需要的，我从最近两天开始对其进行搜索。

例如：

可以说我有以下JSON：

{
  name: 'First Bubble',
  id: 1
  childs: [
   {
     name: 'First child 1',
     id: 1.1
   },
   {
     name: 'Second child 2',
     id: 1.2
   }
]
}

因此，在这种情况下，UI将显示作为父对象的单个气泡，并且单击它时应显示其所有孩子的气泡。所有这些孩子都应该通过简单的线条连接到其父母。