我可以将角度分量附加到SVG

Question

我正在尝试使用d3和svg创建网络拓扑图。封面看起来像这样：

我试图做的是当用户点击一个节点时，我添加了一个我要注入Angular组件的矩形。

 const popRect = me.svg.select('.agent-popover');

        popRect
            .append('svg:rect')
            .attr('x', d.x)
            .attr('y', d.y)
            .attr('width', 200)
            .attr('height', 200);

        popRect
            .append('agent-popover');

这可能吗？这些节目将附加在Dev Tools DOM中，但不会在屏幕上显示。

更新：

我能够通过使用ViewContainerRef并像这样设置我的组件然后更改foreignObject的坐标以将其放置在需要的位置来实现此功能：

 <svg:g [zoomableOf]="network" class="zoom-container" >
        <svg:g class="links" ></svg:g>
        <svg:g class="nodes"></svg:g>
        <svg:g class="securities"></svg:g>
        <svg:g class="agent-popover">
            <svg:foreignObject x="100" y="100" height="200" width="200">
                <ng-template #dynamic></ng-template>
            </svg:foreignObject>
        </svg:g>
    </svg:g>

现在，我需要弄清楚当我关闭它时如何删除/隐藏组件。