Как сделать ссылку d3 sankey выходить из нижней части диаграммы?

Question

С диаграммой d3.js sankey, как я могу сделать поток потока из узла и от диаграммы по направлению к нижней или верхней части? Это требует поворота на 90 градусов по ссылке и для него не заканчиваться на узле (или, по крайней мере, не на диаграмме) и символизирует поток, выходящий из моделируемой системы.

Я хочу, чтобы это выглядело как ссылка «Готовые нефтепродукты» в этом diagram.

В частности, я использую этот boilerplate, но более общий ответ в порядке. Я застрял в том, какие методы я могу использовать, чтобы это произошло, но как только я знаю, что использовать и как их использовать, я могу реализовать его.

Обновление: В принципе, мне интересно, как переписать одну из функций d3 (которая?), Чтобы сделать связь завершенной с горизонтальной линией (т. Е. Заподлицо с потолком или полом SVG) вместо вертикальная линия (то есть сторона другого узла).

Answer 1

Код, приведенный ниже, является функцией, которую я использовал для создания пути ссылки, который оставляет узел справа, горизонтально кратковременно, сгибается вверх с четвертью круга и выходит из потолка диаграммы. Я был наивным в том смысле, что решение не имело ничего общего с переписыванием функции D3 .. просто училось использовать SVG path language.

function drawPathLeavingDiagram(link) { 
    var x0 = link.source.x + link.source.width, 
     x1 = x0 + link.source.width/4, 
     x2 = x1 + link.source.width/2, 
     y0 = link.source.y + link.sourceY + link.thickness/2, 
     y1 = y0 - link.source.width/2, 
     rx = link.source.width/2, 
     ry = link.source.width/2; 
    return "M" + x0 + "," + y0 + "L" + x1 + "," + y0 + 
      "A" + rx + "," + ry + "," + 0 + "," + 0 + "," + 0 + "," + x2 + "," + y1 + 
      "V" + 0; 
    }