D3 Examples - mid-point-curves

xxxxxxxxxx
 
<!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>
​
<body></body>
​
<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>
​
    