javascriptcssangulartypescriptngx-graph
NGX Graph linkTemplate - Links Middle Pointer alignment issue
I'm using the NGX Graph 'linkTemplate' to add circle in the middle of the link(Edge) but alignment is missing. I'm using transform property to align the circle in the middle of link. How to calculate exact coordinates to place the circle(with icon) in the middle of the link?
Here my code for the above graph
<ngx-graph
class="chart-container"
[view]="[990, 800]"
[curve]="curve"
[draggingEnabled]="false"
[autoCenter]="true"
[links]="links"
[nodes]="nodes">
<ng-template #defsTemplate>
<svg:marker id="arrow-yellow" fill="#f49600" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="6" markerHeight="6" orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head"/>
</svg:marker>
<svg:marker id="arrow" fill="#262626" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="6" markerHeight="6" orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head"/>
</svg:marker>
</ng-template>
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect
[attr.width]="node.dimension.width + 5"
[attr.height]="node.dimension.height - 1"
[attr.fill]="node.isSelected ? '#FFB716' : '#f6f6f6'"
[attr.stroke-width]="1"
[attr.stroke]="node.isSelected ? '#f49600' : '#262626'"/>
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2" [attr.letter-spacing]="0.5">
{{node.label}}
</svg:text>
</svg:g>
<svg:g class="assignNode" [attr.transform]="'translate(' + (node.dimension.width - 1) + ',' + 0 + ')'">
<circle cx="5" cy="5" r="9" [attr.stroke]="node.isSelected ? '#f49600' : '#262626'" stroke-width="1" fill="white" />
<path id="assign" viewBox="0 0 5 5" d="M9.88.15a.53.53,0,0,0-.67,0h0L8.05,1.32a4,4,0,0,0-5.27.33l-.5.44,0,.06V2.2a.06.06,0,0,0-.06.06l-.5.44A4,4,0,0,0,1.34,8L.17,9.13l-.05.06a.45.45,0,0,0,.05.66.46.46,0,0,0,.67,0L2,8.63A4,4,0,0,0,7.27,8.3l.5-.5.05,0a.06.06,0,0,0,.06-.06l.5-.5a4,4,0,0,0,.33-5.26L9.88.76A.45.45,0,0,0,9.88.15ZM6.6,7.69a2.94,2.94,0,0,1-4.26,0,3.06,3.06,0,0,1-.06-4.32l.17-.17L6.72,7.47ZM7.71,6.58l-.16.17L3.22,2.43l.17-.17a3,3,0,0,1,4.27,0A3.05,3.05,0,0,1,7.71,6.58Z" />
</svg:g>
</ng-template>
<ng-template #linkTemplate let-link>
<svg:g [attr.class]="link.isLinkActive ? 'active edge': 'notActive edge'">
<svg:path class="line" *ngIf="!link.isLinkActive" stroke-width="1" marker-end="url(#arrow)"></svg:path>
<svg:path class="line" *ngIf="link.isLinkActive" stroke-width="1" marker-end="url(#arrow-yellow)"></svg:path>
</svg:g>
<svg:g class="deAssignEdge" (click)="onDeAssingEvent(link)" *ngIf="link.midPoint" [attr.transform]="'translate(' + (link.midPoint.x) + ',' + (link.midPoint.y) + ')'">
<circle cx="5" cy="5" r="9" [attr.stroke]="link.isLinkActive ? '#f49600': '#262626'" stroke-width="1" fill="white" />
<path d="M6.26,6.89l-.6-.6-2-2-.55-.6-.6-.55a.45.45,0,0,0-.61,0l-.38.44a3.51,3.51,0,0,0-.27,4.61l-1,1h0a.43.43,0,0,0,0,.6.43.43,0,0,0,.61,0l1-1a3.45,3.45,0,0,0,4.61-.27l.43-.44a.42.42,0,0,0,0-.6Zm-.44,1A2.64,2.64,0,0,1,2.09,4.15L2.26,4,6,7.71Z" />
<path d="M9.83.15a.43.43,0,0,0-.61,0h0l-1,1a3.45,3.45,0,0,0-4.61.27l-.38.44h0a.5.5,0,0,0,0,.55L4.51,3.77l-.39.33.44.43.33-.33L5.71,5l-.27.38.44.44.33-.33L7.47,6.78a.42.42,0,0,0,.6,0l.44-.44a3.44,3.44,0,0,0,.27-4.6l1.05-1A.36.36,0,0,0,9.83.15ZM8,5.8,7.8,6,4.07,2.18,4.23,2A2.62,2.62,0,0,1,8,2,2.69,2.69,0,0,1,8,5.8Z" />
</svg:g>
</ng-template>
</ngx-graph>
public links = [
{
id: 'a',
source: 'first',
target: 'second',
label: 'is parent of',
isLinkActive: false,
sourceIndex:1
},
{
id: 'b',
source: 'first',
target: 'third',
label: 'custom label',
isLinkActive: false,
sourceIndex:2
},
{
id: 'c',
source: 'second',
target: 'Four',
label: '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',
source: 'second',
target: 'Seven',
label: 'custom label',
isLinkActive:true,
sourceIndex:4
},
{
id: 'g',
source: 'third',
target: 'Eight',
label: '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
}
];
public nodes = [
{
id: 'first',
label: 'AAAAAAA',
isSelected:false,
},
{
id: 'second',
label: 'BBBBB',
isSelected:true,
},
{
id: 'third',
label: 'CCCC',
isSelected:false
},
{
id: 'Four',
label: 'DDDD',
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',
label: 'KKKKKKK',
isSelected:false
}
]
Stackblitz link: https://stackblitz.com/edit/ngx-graph-demo-quawhu
Solution
Based on this answer you could call a method which returns the mid point of the path by creating a svg element with the same path as the one from the link (link.line) and get the middle of the path like so:
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
}
And in the template:
<svg:g [attr.transform]="'translate(' + getXYForCenteredLinkCircle(link)[0] + ',' + getXYForCenteredLinkCircle(link)[1] + ')'">
It will look like this:
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices