In d3-org-chart how can i add arrow for edges

In d3 org chart I need to show arrow edge towards child how I can get that. I tried using connection but those edges are not coming properly as through links it is coming.

I tried adding marker-end , marker-start in linkupdate but it didnt work.

linkUpdate(function (this,d, i, arr) {
d34.select(this)
.attr('stroke', (d) =>
d.data._upToTheRootHighlighted ? '#152785' : 'black'
)
.attr('stroke-width', (d) =>
d.data._upToTheRootHighlighted ? 5 : 1
)
.attr('pointer-events', 'none')
.attr('stroke-linecap', 'round')
.attr("marker-start", d => `url(#${d.from + "_" + d.to})`)
.attr("marker-end", d => `url(#arrow-${d.from + "_" + d.to})`)

if (d.data._upToTheRootHighlighted) {
d34.select(this).raise();
}
})


expected result is as (https://i.sstatic.net/SZUE9.png)

Continue reading...