drawArrow = (arg) => {
  let group = arg.group,
    sx = arg.sx,
    sy = arg.sy,
    tx = arg.tx,
    ty = arg.ty,
    dr = arg.dr,
    hFlip = arg.hFlip,
    marker = arg.marker === undefined ? 'marker' : arg.marker;

  /* Cool graphics trick -> merge translate and scale together
  translateX = (1 - scaleX) * tx,
  translateY = (1 - scaleY) * ty;
  */
  
  let arrow = group.append('g')
    .attr('class', 'arrow-group');

  arrow.append('path')
    .attr("d", `M${sx},${sy}A${dr},${dr} 0 0,${hFlip ? 0 : 1} ${tx},${ty}`)
    .attr('marker-end', `url(#${marker})`)
    .style('stroke', 'gray')
    .style('fill', 'none');
}
Draw an very neat arrow!
@param {object} arg 
{
  group: element to append this arrow to
  sx: source x
  sy: source y
  tx: target x
  ty: target y
  dr: radius of curve (I'm using a circle)
  hFlip: the direction to choose the circle (there are always two ways)
}