I am currently working on creating a Sankey Diagram from scratch using VueJS and SVG. I have encountered challenges in closing the paths of two parallel quadratic Bezier curve paths from nodes to nodes.
For instance, after some additional calculations, I have obtained the following paths:
path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"
path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"
Although I tried combining these paths, my method failed:
<g>
<template v-for="(point,index) in sankeyNode">
<template v-for="(pnode, idex) in Object.entries(point)">
<template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
<g style="stroke-width:1;" stroke="black" fill="pink" :stroke-opacity="0.3">
<path :d="paths[0]+' '+paths[1]+' Z'" />
</g>
</template>
</template>
</template>
</g>
The challenge now is to close these two parallel paths so that they form a closed shape that can be filled, similar to the reference image provided below:
https://i.sstatic.net/UMXUB.png
Presently, when the paths are combined, they do not form a closed shape as shown in the image link below:
https://i.sstatic.net/rxlv8.png
To try and solve this, I referred to an illustration which can be found at the following link:
https://i.sstatic.net/QI0g3.png
My attempt involved adding a vertical line to connect certain points and then form Quadratic Bezier curves to close the paths, but it did not work as expected. I am currently revisiting SVG documentation to find a solution.
If anyone has any insights or suggestions on how to approach this problem, I would greatly appreciate it. Thank you.