Чтобы нарисовать маркеры в средней точке ваших ссылок, вы можете использовать marker-mid
, который очень похож на marker-start
и marker-end
, за исключением того, что он вставляет элемент маркера в середине.
path.enter().append('svg:path')
.style('marker-mid', function (d) { return 'url(#start-arrow)'; })
Для демонстрационных целей я только что использовал здесь start-arrow
, что, конечно же, можно настроить по своему усмотрению.
Однако маркер будет нарисован только, если является вершиной в средней точке. Это неверно для вашего кода, потому что вы рисуете одну прямую линию от источника до цели, определяя только начальную и конечную точки. С другой стороны, наличие прямой линии пригодится, потому что довольно легко вычислить среднюю точку и разделить прямую линию на два сегмента, тем самым вставив новую вершину посередине. В вашем обработчике tick()
уже есть вычисления, дающие промежуточные результаты, чтобы помочь найти среднюю точку:
// Coordinates of mid point on line to add new vertex.
midX = (targetX - sourceX) / 2 + sourceX;
midY = (targetY - sourceY) / 2 + sourceY;
// | v --- new vertex --- v |
return 'M' + sourceX + ',' + sourceY + 'L' + midX + ',' + midY + 'L' + targetX + ',' + targetY;
Посмотрите следующий фрагмент кода для рабочей демонстрации.