Я реализую диаграмму Санки с нуля с использованием VueJS и SVG, теперь я столкнулся с трудностями при закрытии путей двух параллельных квадратичных c путей кривой Безье от узлов к узлам.
Где для Например, путем дополнительных вычислений я получил следующие пути
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"
Пути объединены таким образом, думая, что это будет работать, но не получится
<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>
Эти два пути параллельны друг другу, но Я хотел бы сделать их близким путем, чтобы я мог заполнить объединенные пути и выглядел бы как изображение ниже
В настоящее время, когда пути в совокупности это выглядит так
Я попробовал следующее с использованием изображения ниже для иллюстрации
Теперь, когда я добрался до «Точки A», которая является концом Path2, я попытался добавить Вертикальную линию к «Точке B», чтобы из «Точки B» я мог сформировать Квадрати c Кривая Безье для «Точки Е» и закрытия т Путь CABE, а также сделать то же самое для Path1, добавив вертикальную линию к «Точке C к E», затем из точки E сформировала кривую Безье Quadrati c к Точке F и закройте путь GCEF.
Моя попытка не сработала, и я перечитываю SVG-документы, чтобы найти подсказку, как решить эту проблему ..
Пожалуйста, мне нужен кто-то, кто подскажет, как решить эту проблему. Спасибо