Curved Edges in Force Directed Graph on Platform Angular 5 TypeScript and D3.js

I have the following code about Force Directed Graphs in Angular 5 TypeScript and D3.js by Reference of https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb:

@Component({
selector: '[linkVisual]',
template: `


<svg:marker id="arrow" viewBox="0 -5 10 10" refX="24" refY="0" markerWidth="6" markerHeight="6" orient="auto">
  <svg:path d="M0,-3L6,0L0,3" class="link" />
</svg:marker>


<svg:line

    class="link"
    [attr.x1]="link.source.x"
    [attr.y1]="link.source.y"
    [attr.x2]="link.target.x"
    [attr.y2]="link.target.y"


    marker-end="url(#arrow)" >


</svg:line>
`,
styleUrls: ['./link-visual.component.css']
})
export class LinkVisualComponent  {
@Input('linkVisual') link: Link;
}

I want to change the edges from linear to curved. On its Javascript way, I had to change attr function such as in here: https://bl.ocks.org/mbostock/4600693

How can I do it on the code above?

Tags: angular, d3.js, graph, types, typescript