NGX-Graph。节点中心的锚点路径

我在使用ngx-graph时遇到了一个问题。能否将连接路径的起点和终点指向一个节点的中心?我的 svg 节点比子元素大,例如enter image description here

我试图实现一个自定义的曲线,实现一个自定义的布局,并试图覆盖子(GraphComponent)方法 “generateLine()”。没有任何结果,每次我都会得到工件和新的问题。你有简单的方法解决这个问题吗?

解决方案:

对于任何人,谁想要一个 “简单 “的答案,这个问题。要想把事情搞好并不是那么容易,但你可以通过覆盖两个特定的方法来实现这个结果。首先重写拖动时端点的计算,这个在updateEdge中完成。其次,覆盖在图形内画线的方法,如果没有移动,只在位置上添加不同的值(初始绘制)。在初始绘制之后,你在updateEdge方法中计算你的移动,并跳过generateLine方法中的额外值,因为你已经计算出了正确的起始点(没什么可做的了)。我们必须在generateLine方法中进行计算,因为边缘的初始位置计算不是由lib-authors完成的,而是由名为 “dagre “的库完成的(搜索npm查看)。所以,我们只能在第一次绘制的时候,修改初始绘制端点(generateLine方法)。如果你有其他可行的方法,而不需要重新实现整个Layout和GraphComponent部分,请在这里分享你的解决方案。)

@ViewChild(GraphComponent) child: GraphComponent;

ngAfterViewInit(): void {

    /* Recalculate Positions of endpoints while moving / dragging, added i as an identifier that it was moved */

    // tslint:disable-next-line:only-arrow-functions
    (this.child.layout as Layout).updateEdge = function(graph: Graph, edge: Edge): Graph {

      const sourceNode = graph.nodes.find(n => n.id === edge.source);
      const targetNode = graph.nodes.find(n => n.id === edge.target);

      // centered so i do not bother if its up oder downwards bot -1
      const dir = sourceNode.position.y <= targetNode.position.y ? -1 : -1;
      // Compute positions while dragging here
      const startingPoint = {
        x: sourceNode.position.x - dir * (sourceNode.dimension.height / 2),
        i: true,
        y: sourceNode.position.y,

      };
      const endingPoint = {
        x: targetNode.position.x - dir * (targetNode.dimension.height / 2),
        i: true,
        y: targetNode.position.y,

      };

      // generate new points
      edge.points = [startingPoint,  endingPoint ];
      return graph;
    };

    /* Calculate Initial position of the Arrows, on first draw and add only amount of x if not modified or not dragged*/
    this.child.generateLine = function(points: any): any {

      const lineFunction = shape
        .line<any>()
        .x(d => {
          let addVal = 0;
          if (d.i === undefined){
             addVal = 60;
          }
          const xval =  d.x + addVal;
          return xval;
        })
        .y(d => d.y)
        .curve(this.curve);
      return lineFunction(points);
    };

}

给TA打赏
共{{data.count}}人
人已打赏
解决方案

基于汇总值过滤data.table的最有效方法。

2022-5-13 3:00:23

解决方案

DevTools加载SourceMap失败。无法加载内容

2022-5-13 3:00:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索