#angular #ngx-graph
Вопрос:
Я использую ngx-график в своем приложении Angular, и все это работает хорошо, за исключением того, что, когда я запускаю приложение, оно не всегда отображается так, как должно быть. Вот как это должно выглядеть:
Но после любого действия, которое я могу выполнить, т. Е. проложить маршрут к другому компоненту и обратно, вот как выглядит график:
Я попытался поиграть с узлом.измерение.атрибут ширины, но если я установлю его вручную или добавлю к нему, он просто перекрывает стрелки. Это мой код:
<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-графика ведет себя так?
Спасибо вам за вашу помощь 🙂
Комментарии:
1. Попробуйте это, я сделал пару обновлений stackblitz.com/edit/…