mid-point-curves

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path{
  fill: none;
  stroke: black;
}

.point{
  fill: lightgrey;
  stroke: black;
  cursor: pointer;
}

.straight{
  stroke: black;
  opacity: .1
}

.midpoint{
  fill: green;
  opacity: .1;
}

.projected{
  fill: steelblue;
  opacity: 1;
}

.diagonal{
  opacity: .1
}

</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="jetpack.js"></script>

d3.selection.prototype.appendData = function(name, data){
  return this.selectAll(name)
      .data(data).enter()
    .append(name)
}

function ƒ(str){ return function(d){ return str ? d[str] : d } }

var drag = d3.behavior.drag()
    .on('drag', function(d){
      d[0] = Math.round(Math.max(0, Math.min(width,  d3.event.x)))
      d[1] = Math.round(Math.max(0, Math.min(height, d3.event.y)))

render()
    })
    .origin(function(d){ return {x: d[0], y: d[1]} })

var width = 960,
    height = 500

var svg = d3.select('body').append('svg')
    .attr({width: width, height: height})

var circleData = [[100, 200], [600, 300], [260, 360]]

var connectionData = [
  {a: circleData[0], b: circleData[1]},
  {a: circleData[1], b: circleData[0]},
  {a: circleData[1], b: circleData[2]},
  // {a: circleData[0], b: circleData[1]},
]

var straight = svg.appendData('path.straight', connectionData)
var diagonal = svg.appendData('path.diagonal', connectionData)
var bezier   = svg.appendData('path.bezier',   connectionData)

var midpoints = svg.appendData('circle.midpoint', connectionData)
    .attr('r', 5)

var projected = svg.appendData('circle.projected', connectionData)
    .attr('r', 5)

var circles = svg.appendData('circle.point', circleData)
    .call(drag)
    .attr('r', 10)

render()

function render(){
  circles.translate(ƒ())

connectionData.forEach(function(d){
    d.m = [(d.a[0] + d.b[0])/2, (d.a[1] + d.b[1])/2]

var θ = Math.PI - Math.atan2(d.a[0] - d.b[0], d.a[1] - d.b[1]) 
    var r = 20

d.p = [d.m[0] - r*Math.cos(θ), d.m[1] - r*Math.sin(θ)]
    d.z = [d.m[0] - 50*Math.cos(θ), d.m[1] - 50*Math.sin(θ)]

})

straight
      .attr('d', function(d){
        return ['M', d.a, 'L', d.b].join(' ')
      })

diagonal
    .attr('d', function(d){
      return ['M', d.a, 'L', d.p, 'L', d.b].join(' ')
    })

bezier.attr('d', function(d){
      return ['M', d.a, 'Q', d.z, d.b].join(' ')
    })

midpoints.translate(ƒ('m'))
  projected.translate(ƒ('p'))

}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js