var r = 25
    width = 960 - 2*r,
    height = 500 - 2*r
    

var points = d3.range(4).map(function(d){
  return P(width*Math.random(), height*Math.random())
})

var lines = [[points[0], points[1]], [points[2], points[3]]]


var drag = d3.behavior.drag()
    .origin(ƒ())
    .on('drag', function(d){
      d.x = Math.max(0, Math.min(width, d3.event.x))
      d.y = Math.max(0, Math.min(height, d3.event.y))
      render()
    })


var svg = d3.select('html')
  .append('svg')
    .attr({width: width + 2*r, height: height + 2*r})
  .append('g')
    .translate([r, r])

svg.dataAppend(points, 'circle.point')
    .attr('r', r)
    .call(drag)

svg.dataAppend(lines, 'path')

svg.append('circle.intersection')
    .attr('r', 5)


function render(){
  d3.selectAll('.point')
      .translate(ƒ())

  d3.selectAll('path')
      .attr('d', toPathStr)

  var i = intersection.apply(null, points)

  d3.selectAll('.intersection')
      .translate(i)
      .style('fill', i.isIntersection ? 'red' : '#333')
}
render()