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

Question

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)

Random · Accepted Answer · 2025-01-20 12:59:02Z

Define markers in a separate function, then call it after rendering

initArrows() {
  // Get the svg that d3-org-chart created
  const svg = d3.select(this.chartContainer.nativeElement).select("svg");

  // If the marker is already defined, skip re-creating it
  if (!svg.select("marker#arrow-side").empty()) return;

  // Append <defs> block inside the same <svg>
  const defs = svg.append("defs");

  // Marker for side edges (horizontal)
  defs.append("marker")
    .attr("id", "arrow-side")
    .attr("markerUnits", "strokeWidth")
    .attr("markerWidth", 50)
    .attr("markerHeight", 50)
    .attr("viewBox", "0 -5 25 25")
    .attr("refX", 10)
    .attr("refY", 6)
    .attr("orient", "auto-start-reverse")
    .append("path")
      .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
      .attr("style", "fill: " + this.connectorLineColor); //arrow color

  // Marker for top edges (vertical)
  defs.append("marker")
    .attr("id", "arrow-top")
    .attr("markerUnits", "strokeWidth")
    .attr("markerWidth", 50)
    .attr("markerHeight", 50)
    .attr("viewBox", "0 -5 25 25")
    .attr("refX", 10)
    .attr("refY", 6)
    // Using a fixed orient of 90 degrees (down).
    .attr("orient", 90)
    .append("path")
      .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
      .attr("style", "fill: " + this.connectorLineColor); //arrow color
}

In your linkUpdate function, add marker-end (or marker-start):

.attr("marker-start", !d.flexCompactDim ? "url(#arrow-top)" : "url(#arrow-side)");

Perhaps an optimization for vertical arrows with _upToTheRootHighlighted is needed

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related