angular - Ngx-graph 显示不正确
问题描述
我在我的 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 组件会这样吗?
谢谢您的帮助 :)
解决方案
推荐阅读
- c++ - 以前使用 CRTP 接口的迭代记忆
- python - Shapely 点对象和 Geopandas 数据框产生空输出
- android - checkableBehavior="all" 不适用于菜单
- robotics - 位置控制器能够平移关节,但不能旋转
- django - 如何使用 Django 中的 OneToOne 字段创建多种类型的用户?
- api - Swagger - 从定义中检索“示例值”以构建测试
- safari - CAS v6.4:注册服务时不重定向 safari (macOS Catalina) 中的登录页面
- python - 如何在没有 Process 类的情况下从 C# 执行 Python 脚本
- flutter - 如何使状态栏颜色与颤动中的容器颜色相同
- ios - 无法连接到 iPhone se2 上的 React-Native 语音通话