点击,线条上出现图形,并且图形沿着线流动

1 .现在好像做不到添加元素,那就只有向隐藏,点击的时候出现了,那就是要先看是否支持动画的链式调用了..
2 .怎么样做到给markup已经定好的结构新增元素呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script> -->
    <!-- 实在调试不出来,那就换最新的版本试试 -->
    <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
    <!-- 线条过渡样式 -->
    <!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
    <h3>基本图形和属性</h3>
    <div id="container">

    </div>
    <script>
        const graph=new X6.Graph({
            container:document.getElementById('container'),
            width:800,
            height:600,
            grid:true,  
        })
       graph.addEdge({
           source:{x:320,y:60},
           target:{x:300,y:260},
           vertices:[{x:320,y:200}],
           markup:[
                {
                    tagName:'path',
                    selector:'p1'
                },{
                    tagName:'path',
                    selector:'p2'
                },
                //代表一条线段好像一定要有两个path,一个是明处显示,一个是在暗处,当作阴影之类的
                {
                    tagName:'rect',
                    //要渲染一个矩形,
                    selector:"sign"
                },{
                    tagName:'circle',
                    selector:'c1'
                    //渲染一个大圆
                },{
                    tagName:'circle',
                    selector:'c2'
                    //渲染一个小圆,和上面的组和显示为一个圆环
                },{
                    tagName:"text",
                    selector:"signText",
                    //显示一段文本
                }
           ],
           attrs:{
               p1:{
                   fill:'none',
                   stroke:'#237804',
                   strokeWidth:6,
                   strokeLinejoin:'round',
                   connection:true,
                   //加这个属性才能在path上面绑定上d属性,不然就爆炸
                   //仅适用于边的 <path> 元素，当该属性为 true 时，表示将在该元素上渲染边，即设置该元素的 d 为边的 pathData
               },
               p2:{
                connection:true,
                fill:'none',
                stroke:'#237804',
                strokeWidth:6,
                strokeLinejoin:'round'
               },
               sign:{
                   x:-20,
                   y:-10,
                   width:50,
                   height:20,
                   stroke:"#237804",
                   fill:"#73d13d",
                   atConnectionLength:30,
                   //将边中的指定元素移动到指定偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致

                   //问题来了,如何知道这个矩形属于这条边呢,仅仅是因为他们被同一个g包围起来么
                   strokeWidth:1,
                   event:'click:rect',
                   //定义了可以触发的事件
                   cursor:'pointer'

               },
               signText:{
                   atConnectionLength:24,
                   textAmchor:'middle',
                   textVerticalAnchor:'middle',
                   text:'按钮',
                   event:'click:rect',
                   cursor:'pointer'
               },
               c1:{
                   r:10,
                   stroke:"#5222d",
                   fill:"#fe854f",
                   atConnectionRatio:0.68,
                   strokeWidth:1,
               },
               c2:{
                   r:8,
                   stroke:"#f5222d",
                   fill:"white",
                   atConnectionRatio:0.68,
                   strokeWidth:1,
               }
           }
       })

       graph.on('edge:click',(e)=>{
           console.log('click',e)
           e.e.stopPropagation()

           const t=e.edge.attr('c1/atConnectionRatio')>0.3?0.3:0.9
           //获取data,attrs里面的某个属性值,

           //并且重新搞成一个新的值

           //动画配置
           const options={
               delay:100,
               duration:1000,
               timing:X6.Timing.easeInOutBack,
           }

           e.edge.transition('attrs/c1/atConnectionRatio',t,options)
           //元素.变化的属性,变化后的值,变化的参数
           e.edge.transition('attrs/c2/atConnectionRatio',t,options)
       })


        
    </script>
</body>
</html>