I've been working on customizing a tool from an open source library called angular-d3-tree, but I'm struggling with getting the links to connect properly in my D3 tree structure. This is what my current tree layout looks like:
https://i.stack.imgur.com/DzlaV.png
The issue I'm facing is that I want the links to originate from the center of the back of the rectangles, rather than the top left corner. I believe this behavior is controlled by a method defined within angular-d3-tree:
// Creates a curved (diagonal) path from parent to the child nodes
diagonalCurvedPath(s, d) {
console.log('diagonalCurvedPath() called s and d are:');
console.log(s);
console.log(d);
const path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
return path
}
The diagonalCurvedPath function is used within this particular routine:
setLinks( source: any, treeData: any){
let links = treeData.descendants().slice(1);
var link = this.svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', (d)=>{
var o = {x: source.x0, y: source.y0}
return this.diagonalCurvedPath(o, o)
});
var linkUpdate = linkEnter.merge(link);
linkUpdate.transition()
.duration(this.duration)
.attr('d', (d)=>{return this.diagonalCurvedPath(d, d.parent)});
var linkExit = link.exit().transition()
.duration(this.duration)
.attr('d', (d) => {
var o = {x: source.x, y: source.y}
return this.diagonalCurvedPath(o, o)
})
.remove();
}
I've attempted to make modifications to the diagonalCurvedPath function, but it has led to unexpected outcomes. The syntax of the following code snippet confuses me:
const path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
I'm unsure about what M and C represent here. Any assistance or guidance would be greatly appreciated as I feel like I'm struggling to make progress with this issue. Thank you!