How to turn a connecting line from curved to straight?

[makepado]

The connecting lines between nodes are curved. How do I set them to a 90 degree right angle?

Is this configurable?

[bumbeishvili]

Yes, chart.linkGroupArc is responsible for that

https://github.com/bumbeishvili/org-chart/blob/c8ebb0490ecfcf1424c16a8528a4a835d3efde53/src/d3-org-chart.js#L96

This is how it's invoked

https://github.com/bumbeishvili/org-chart/blob/c8ebb0490ecfcf1424c16a8528a4a835d3efde53/src/d3-org-chart.js#L776

I think you can play with linkHorizontal here.

https://observablehq.com/@d3/collapsible-tree

[makepado]

I'm really sorry, I think I don't have enough understanding of d3.js. I couldn't find a way even though I used gpt.

but I've tried various things, I don't know how to do it.

This is my situation.

Without using npm. I downloaded and use .js myself.

js file list

1. d3.js https://d3js.org/d3.v7.min.js
2. d3-org-chart.js https://cdn.jsdelivr.net/npm/d3-org-chart@2
3. d3-flextree.js https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js

Direct modifications to d3-org-chart@2.js and what I've tried

1. The reference values of linkX, linkY, linkJoinX, and linkJoinY were exchanged
2. The reference values of linkGroupArc have been changed

https://realtimehtml.com/ Could you tell me as an example on this site?

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>
<div
class="chart-container"
></div>

<script>
var chart;
d3.csv(
'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv'
).then(data => {
chart = new d3.OrgChart()
.container('.chart-container')
.linkGroupArc(d3.linkHorizontal().x(d => d.y).y(d => d.x))
.data(data).compact(false)
.render();
});
</script>

I changed it as above, but it doesn't seem to apply. Is there anything else I should apply?

[bumbeishvili]

We have 2 kinds of different connections, I thought you were referring to similar connections

looks like you just want to change the link curvature in here (this is v3 org chart version)

https://github.com/bumbeishvili/org-chart/blob/279153efe64de34f011db458f7f2655884a2fef0/src/d3-org-chart.js#L218C57-L218C126

Here is how the modified version will look when posted at https://realtimehtml.com

Here is the code that can be pasted there

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>
<div class="chart-container"></div>

<script>
      var chart;
      d3
            .csv(
                  "https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv"
            )
            .then((data) => {
                  chart = new d3.OrgChart()

                        .diagonal(function (s, t, m, offsets = { sy: 0, }) {
                              const x = s.x;
                              let y = s.y;

                              const ex = t.x;
                              const ey = t.y;

                              let mx = m && m.x || x;
                              let my = m && m.y || y;

                              let xrvs = ex - x < 0 ? -1 : 1;
                              let yrvs = ey - y < 0 ? -1 : 1;

                              y += offsets.sy;

                              let rdef = 35;
                              let r = Math.abs(ex - x) / 2 < rdef ? Math.abs(ex - x) / 2 : rdef;

                              r = Math.abs(ey - y) / 2 < r ? Math.abs(ey - y) / 2 : r;

                              let h = Math.abs(ey - y) / 2 - r;
                              let w = Math.abs(ex - x) - r * 2;
                              //w=0;
                              const path = `
                          M ${mx} ${my}
                          L ${x} ${my}
                          L ${x} ${y}
                          L ${x} ${y + h * yrvs}
                          L  ${x} ${y + h * yrvs + r * yrvs} ${x} ${y + h * yrvs + r * yrvs
                                    } ${x + r * xrvs} ${y + h * yrvs + r * yrvs}
                          L ${x + w * xrvs + r * xrvs} ${y + h * yrvs + r * yrvs}
                          L  ${ex}  ${y + h * yrvs + r * yrvs} ${ex}  ${y + h * yrvs + r * yrvs
                                    } ${ex} ${ey - h * yrvs}
                          L ${ex} ${ey}
               `;
                              return path;
                        })
                        .compact(false).container(".chart-container").data(data).render();
            });
</script>