NGX Graph linkTemplate - ошибка выравнивания среднего указателя ссылок

Question

Я использую NGX Graph 'linkTemplate', чтобы добавить круг в середине ссылки (край), но выравнивание отсутствует. Я использую свойство transform, чтобы выровнять круг в середине ссылки. Как рассчитать точные координаты, чтобы поместить кружок (со значком) в середину ссылки?

Here my code for the above graph

 {{node.label}} publi c links = [{id: 'a', source: 'first', target: 'second', label: 'is parent of', isLinkActive: false, sourceIndex: 1}, {id: 'b', источник: «первый», цель: «третий», метка: «особая метка», isLinkActive: false, sourceIndex: 2}, {id: 'c', источник: «второй», цель: «четыре», метка : 'custom label', isLinkActive: true, sourceIndex: 1}, {id: 'd', source: 'second', target: 'Five', label: 'custom label', isLinkActive: true, sourceIndex: 2}, {id: 'e', ​​source: 'second', target: 'Six', label: 'custom label', isLinkActive: true, sourceIndex: 3}, {id: 'f' , источник: 'второй', цель: 'семь', метка: 'особая метка', isLinkActive: true, sourceIndex: 4}, {id: 'g', источник: 'третий', цель: 'Восемь', метка: 'custom label', isLinkActive: false, sourceIndex: 1}, {id: 'h', source: 'third', target: 'Nine', label: 'custom label', isLinkActive: false, sourceIndex: 2}, { id: 'i', source: 'third', target: 'Ten', label: 'custom label', isLinkActive: false, sourceIndex: 3}, {id: 'j', source: 'Four', target: ' Ele ', label:' custom label ', isLinkActive: false, sourceIndex: 1}, {id:' 1 ', source:' Ele ', target:' Four ', label:' custom label ', isLinkActive: false, sourceIndex : 1}]; publi c nodes = [{id: 'first', label: 'AAAAAAA', isSelected: false,}, {id: 'second', label: 'BBBBB', isSelected: true,}, {id: 'third ', label:' CCCC ', isSelected: false}, {id:' Four ', label:' D DDD ', isSelected: false}, {id:' Five ', label:' EEEEE ', isSelected : false}, {id: 'Six', label: 'FFFF', isSelected: false}, {id: 'Seven', label: 'GGGG', isSelected: false}, {id: 'Eight', label: ' HHH ', isSelected: false}, {id:' Nine ', label:' III ', isSelected: false}, {id:' Ten ', label:' JJJ ', isSelected: false}, {id:' Ele ' , метка: 'KKKKKKK', isSelected: false}] 

Ссылка Stackblitz : https://stackblitz.com/edit/ngx-graph-demo-quawhu

Answer 1

На основе этого ответа вы можете вызвать метод, который возвращает среднюю точку пути, создав элемент svg с тем же путем, что и путь из ссылки (link.line), и получите средний пути вот так:

  getXYForCenteredLinkCircle(link: Edge): [number, number] {
    var myPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    myPath.setAttributeNS(null, "d", link.line);
    var length = myPath.getTotalLength();
    let p = myPath.getPointAtLength(length / 2);
    return [p.x - 5, p.y - 5]; // Consider the center coordinates of the circle 
  }

А в шаблоне:

<svg:g [attr.transform]="'translate(' + getXYForCenteredLinkCircle(link)[0] + ',' + getXYForCenteredLinkCircle(link)[1] + ')'">

Это будет выглядеть так:

введите описание изображения здесь