Я сделал несколько иной подход от Phrogz. Я попытался удалить маркер пути и вместо этого нарисую его, используя новый путь, который идет в середину дуги и чей ход невидим. Вычисление средней точки немного затруднительно, поэтому, если вы хотите изменить характеристики дуги, вам может быть лучше подан подход Phrogz или какой-то гибрид.
В этом случае триггер не так уж плох, потому что если вы посмотрите внимательно, вы заметите, что дуга, используемая для генерации ссылок, связана с кругом с тем же радиусом и расстоянием между узлами. Таким образом, у вас есть равносторонний треугольник, и все, что вам нужно сделать, это вычислить расстояние, пройденное срединной точкой сегмента линии линии связи до средней точки дуги.
Я думаю, мне нужна диаграмма для объяснения:
[/g1] Таким образом, треугольник ABC является равносторонним и EC bisect AB. Так как у нас есть координаты для А и В, то найти M легко (усредним координаты). Это означает, что мы также знаем наклон от A до B (delta y / delta x), поэтому наклон от M до E является отрицательным обратным. Знание М и наклон к E означает, что мы почти там, нам просто нужно знать, как далеко продвинуться.
Для этого мы используем тот факт, что ACM представляет собой треугольник 30-60-90, и поэтому
| CM | = sqrt (3) * | AM |
, но | AM | = | AB | / 2 и | CE | = | AB |
Итак,
| ME | = | AB | - sqrt (3) * | AB | / 2
Для того, чтобы эта длина имела смысл, нам придется ее нормализовать с длиной вектора наклона, которую мы уже знаем, совпадает с радиусом круга.
В любом случае, соединяя все это:
var markerPath = svg.append("svg:g").selectAll("path.marker")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "marker_only " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
... later in the tick handler
markerPath.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
// We know the center of the arc will be some distance perpendicular from the
// link segment's midpoint. The midpoint is computed as:
var endX = (d.target.x + d.source.x) / 2;
var endY = (d.target.y + d.source.y) / 2;
// Notice that the paths are the arcs generated by a circle whose
// radius is the same as the distance between the nodes. This simplifies the
// trig as we can simply apply the 30-60-90 triangle rule to find the difference
// between the radius and the distance to the segment midpoint from the circle
// center.
var len = dr - ((dr/2) * Math.sqrt(3));
// Remember that is we have a line's slope then the perpendicular slope is the
// negative inverse.
endX = endX + (dy * len/dr);
endY = endY + (-dx * len/dr);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + endX + "," + endY;
});
Проверьте здесь . Обратите внимание, что мой путь css для пути маркера установлен на прозрачный красный цвет, обычно вы хотите установить штрих в «none», чтобы скрыть линии.