Как нарисовать график сплайна в d3

Question

Фон

graphviz отлично подходит для выкладывания графиков.Когда я размещаю свой график в графизированной «точке», он создает файл с узлами и ребрами, помеченными позициями.Например, ребро:

"a" -> "b"   [pos="e,152.13,411.67 91.566,463.4 108.12,449.26 127.94,432.34 144.37,418.3"];

Язык сплайнов Graphviz выглядит следующим образом:

 spline       =   (endp)? (startp)? point (triple)+
 and triple   =   point point point
 and endp     =   "e,%f,%f"
 and startp   =   "s,%f,%f"

Если у сплайна есть точки p1 p2 p3 ... pn, (n= 1 (mod 3)), точки соответствуют контрольным точкам кубического B-сплайна от p1 до pn.Если задано startp, оно касается одного узла ребра, и стрелка переходит от p1 до startp.Если startp не задано, p1 касается узла.Аналогично для pn и endp.

Таким образом, разбивая приведенную выше строку,

e,152.13,411.67   // This is an endpoint. 
91.566,463.4      // p1
108.12,449.26     // the following three points are control points for a cubic b-spline
127.94,432.34
144.37,418.3

Вопрос

Я хочу нарисовать этот сплайн через d3.d3, кажется, имеет кубические b-сплайны со следующей подписью:

d3.curveBasis (контекст)

Создает кубическую основусплайн с использованием указанных контрольных точек.Первая и последняя точки дублируются так, что сплайн начинается в первой точке и заканчивается в последней точке и касается линии между первой и второй точками и линии между предпоследней и последней точками.

Итак, как мне взять строку

[pos="e,152.13,411.67 91.566,463.4 108.12,449.26 127.94,432.34 144.37,418.3"];

и нарисовать сплайн, который будет отображать graphviz в d3?

Answer 1

Оказывается, я обдумывал это.

Если вы переместите e (конечную точку) в конец массива точек, d3.curveBasis() отразит это идеально.

# G is a networkx graph and A is a pygraphviz graph
for e in G.edges():
    points = A.get_edge(e[0], e[1]).attr["pos"].lstrip('e,').split(' ')
    points.append(points.pop(0))
    G.edges[e[0], e[1]].update({'points': [{'x':float(p.split(',')[0]), 'y':float(p.split(',')[1])} for p in points]})

И позже:

var lineGenerator = d3.line().y(d => d.y).x(d => d.x).curve(d3.curveBasis);

link.enter()
    .append('path')
    .attr('d', l => lineGenerator(l.points))