D3 кривые линии обратные

Question

Как я могу сделать эти линии противоположными?

Я видел это сообщение: Curved line on d3 force directed tree и я нашел способ сделать строки в левой дуге другим путем путем переключения начального положения и конечного положения. Проблема возникает, когда я хочу анимировать вещи по пути.

Есть ли лучший способ, которым я могу это сделать без переключения начального и конечного положения?

var startX, startY, endX, endY; 

var line = lineGroup.insert('path') 
    .attr('class', 'map__airport__line') 
    .attr('id', 'line-' + self.attr('id') + '-' + target.attr('id')) 
    .attr('d', function() { 
     if (parseInt(target.attr('cx')) > parseInt(self.attr('cx'))) { 
      startX = self.attr('cx'); 
      startY = self.attr('cy'); 
      endX = target.attr('cx'); 
      endY = target.attr('cy'); 
     } else { 
      startX = target.attr('cx'); 
      startY = target.attr('cy'); 
      endX = self.attr('cx'); 
      endY = self.attr('cy'); 
     } 

     var dx = target.attr('cx') - self.attr('cx'), 
      dy = target.attr('cy') - self.attr('cy'), 
      dr = Math.sqrt(dx * dx + dy * dy), 
      path = 
       'M' + startX + "," + startY + 
       'A' + dr + ',' + dr + ' 0 0,1 ' + 
       endX + ',' + endY; 

     return path; 
    }); 

Answer 1

Изменение 0 0,1 до 0 0 0:

var startX, startY, endX, endY; 

var line = lineGroup.insert('path') 
.attr('class', 'map__airport__line') 
.attr('id', 'line-' + self.attr('id') + '-' + target.attr('id')) 
.attr('d', function() { 
    if (parseInt(target.attr('cx')) > parseInt(self.attr('cx'))) { 
     startX = self.attr('cx'); 
     startY = self.attr('cy'); 
     endX = target.attr('cx'); 
     endY = target.attr('cy'); 
    } else { 
     startX = target.attr('cx'); 
     startY = target.attr('cy'); 
     endX = self.attr('cx'); 
     endY = self.attr('cy'); 
    } 

    var dx = target.attr('cx') - self.attr('cx'), 
     dy = target.attr('cy') - self.attr('cy'), 
     dr = Math.sqrt(dx * dx + dy * dy), 
     path = 
      'M' + startX + "," + startY + 
      'A' + dr + ',' + dr + ' 0 0 0 ' + 
      endX + ',' + endY; 

    return path; 
}); 

Смотрите документацию по дуговых путей здесь: enter link description here