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

308 Views Asked by At

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.stack.imgur.com/SZUE9.png)

0

There are 0 best solutions below