angular - NGX-Graph：节点中心的锚定路径

Question

ngx-graph 有问题。是否可以将连接路径的起点和终点指向节点的中心？我的 svg 节点大于子元素，例如：

我尝试实现自定义曲线，实现自定义布局并尝试覆盖子（GraphComponent）方法“generateLine()”。每次我遇到人工制品和新问题时，没有什么能带来成功。你有这个问题的简单解决方案吗？

Answer 1

对于任何想要这个问题的“简单”答案的人。让事情正常工作并不是那么容易，但是您可以覆盖这两个特定的方法来实现结果。首先在拖动时覆盖端点的计算，这是在 updateEdge 中完成的。接下来，覆盖在图形中绘制线条的方法，如果未移动（初始绘制），则仅将不同的值添加到位置。在初始绘制之后，您在 updateEdge 方法中计算您的移动，并跳过 generateLine 方法中的额外值，因为您已经计算了正确的起点/终点（不再需要做任何事情）。我们必须在 generateLine 方法中执行此操作，因为边缘的初始位置计算不是由 lib-authors 完成的，而是由名为“dagre”的库完成的（在 npm 中搜索）。所以，我们只能在第一次绘制时修改初始绘制端点（generateLine-method）。如果您在不重新实现整个 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);
    };

}