angular - 我可以将角度组件附加到 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');

这可能吗？要附加在开发工具 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>

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

标签： angulard3.jssvgwebpack