Я ОП, этот ответ - просто дополнение к превосходным ответам выше ради других с тем же вопросом.
Ответы показывают, как это сделать для графика с дугами. Если у вас прямые ссылки, принятый ответ нужно немного изменить. Вот как:
Ваши прямые ссылки, вероятно, реализованы с помощью line
, их нужно преобразовать в polyline
. Например:
// old: svg.selectAll(".link").data(links).enter().append("line")
svg.selectAll(".link").data(links).enter().append("polyline")
Затем мы должны кодировать полилинию в соответствии с этим примером , поэтому ваш исходный код, который кодирует line
:
force.on("tick", function() {
link.attr("x1", function(d) {return d.source.x;})
.attr("y1", function(d) {return d.source.y;})
.attr("x2", function(d) {return d.target.x;})
.attr("y2", function(d) {return d.target.y;});
Изменяется на:
force.on("tick", function() {
link.attr("points", function(d) {
return d.source.x + "," + d.source.y + " " +
(d.source.x + d.target.x)/2 + "," + (d.source.y + d.target.y)/2 + " " +
d.target.x + "," + d.target.y; });
И, наконец, не забудьте преобразовать marker-end
в marker-mid
:
// old: link.attr("marker-end",
link.attr("marker-mid",
Кредиты на @Phrogz для показа способ.