Создайте более мелкий изогнутый путь SVG между двумя узлами сети D3.

Question

У меня есть эта скрипка: http://jsfiddle.net/gp0u5rLu/74/

Она основана на этом примере: https://bl.ocks.org/mbostock/4600693

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

edges.forEach(function(link) {
    var s = link.source = nodeById.get(link.source),
      t = link.target = nodeById.get(link.target),
      i = {}; // intermediate node
   testNodes.push(i)
    edges.push({
      source: s,
      target: i
    }, {
      source: i,
      target: t
    });
    bilinks.push([s, i, t]);
  });

Вот как рисуется путь:

function positionLink(d) {
    return "M" + d[0].x + "," + d[0].y +
      "Q" + d[1].x + "," + d[1].y +
      " " + d[2].x + "," + d[2].y;
  }

• d [0] - исходный узел

• d [1] является промежуточным узлом

• d [2] является целевым узлом

Существует несколькопроблемы.Если я нажимаю кнопку «Добавить данные» несколько раз, она очищает края.Я думаю, что это связано с кривизной путей, так как, когда я перетаскиваю узлы после, пути появляются снова.Это подводит меня ко второй проблеме: кривые слишком «пышные».

Если бы я понял, как на самом деле создаются кривые, это помогло бы мне решить проблему слишком пышных кривых.

Спасибо

РЕДАКТИРОВАТЬ

Мне удалось найти временную работу, но это не правильное решение.

См. Скрипку: http://jsfiddle.net/gp0u5rLu/75/

Исправление здесь состояло в том, чтобы установить начальную позицию узлов к центру контейнера.Таким образом, пути будут «перетянуты» к центру, а не к внешней стороне.

testNodes.forEach(function(d){
            d.x =  width/2
      d.y =  height/2
})

Опять же, я уверен, что есть лучший способ, но сейчас это может сработать.

* Проблема исчезновения краев по-прежнему возникает после нажатия кнопки «Добавить» примерно 6–8 раз.