G6.antv自定义箭头懒加载数据箭头丢失

高高i

于 2024-03-13 15:47:00 发布

阅读量582

点赞数 9

文章标签： antv g6 自定义箭头箭头丢失

本文链接：https://blog.csdn.net/m0_44963501/article/details/136682207

版权

本文讨论了在使用懒加载数据时，如何解决Dagre折线图中的箭头消失问题，通过自定义polyline的endArrow样式，包括路径和填充色，以保持美观的空心箭头效果。

摘要由CSDN通过智能技术生成

懒加载数据会导致箭头消失，只能自定义箭头
层次图：dagre
折线：polyline
设置endArrow：true

接口懒加载数据，执行 this.graph.read(this.graphData); this.graph.zoom(0.6);箭头消失，需自定义箭头

空心箭头，fill失效导致样式不美观。所以自定义内置箭头一样的样式
在这里插入图片描述

在这里插入图片描述

  layout: {
          type: "dagre",
          rankdir: "LR",
          begin: [60, 20],
          // align: "UL",
          nodesep: 10,
          ranksep: 30
        },
          defaultNode: {
          type: "rect",
          size: [300, 230],
          shape: "rect",
          labelCfg: {
            style: {
              fill: "#fff",
              fontSize: 14
            }
          }
        },
        defaultEdge: {
          type: "polyline",
          style: {
             endArrow: {
              // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
              path: "M0,-4 L6,0 L0,4",
              d: 14,
              fill: "#ccc",
              opacity: 0.8
            },
            lineWidth: 2,
            stroke: "#ccc",
            radius: 10,
            offset: 10,
            curveOffset: 10
          }
        }