0

我在我的 Angular 应用程序中使用 ngx-graph，一切正常，除了当我运行应用程序时，它并不总是按应有的方式显示。它应该是这样的：

在此处输入图像描述

但是在我可能执行的任何操作之后，即路由到另一个组件并返回，这就是图表的样子：

在此处输入图像描述

我尝试使用 node.dimension.width 属性，但如果我手动设置或添加它，它只会与箭头重叠。这是我的代码：

<ngx-graph class="chart-container"
                [showMiniMap]="true"
                [draggingEnabled]="false"
                [view]="[1500,1000]"
                [links]="links"
                [nodes]="nodes"
                layout="dagre">
                <ng-template #defsTemplate>
                   <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" 
                               markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                   </svg:marker>
                </ng-template>
                <ng-template #nodeTemplate let-node>
                    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="true" >
                        <!-- card info -->
                        </mde-popover>
                        <svg:g class="node" [mdePopoverTriggerFor]="appPopover" 
                              mdePopoverTriggerOn="click" >
                            <svg:rect
                            [attr.width]="node.dimension.width"
                            [attr.height]="node.dimension.height"
                            [attr.fill]="node.data.color"
                            />
                            <svg:text alignment-baseline="central" [attr.x]="10" 
                                      [attr.y]="node.dimension.height / 2">
                                {{node.label}}
                            </svg:text>
                        </svg:g>
                    </ng-template>
                    <ng-template #linkTemplate let-link>
                        <svg:g class="edge">
                            <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"> 
                            </svg:path>
                        </svg:g>
                    </ng-template>
                </ngx-graph>

知道为什么 ngx-graph 组件会这样吗？

谢谢您的帮助 ：）

4

0 回答 0