angular - NGX-Graph:节点中心的 anchor 路径

Question

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

我尝试实现自定义曲线，实现自定义布局并尝试重写子(GraphComponent)方法“generateLine()”。每当我遇到文物和新问题时，没有什么会带来成功。对于这个问题你有一个简单的解决方案吗？

Answer 1

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

}