test

_.md

[ Launch: test ] 6967162 by jrunning

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/TsJn6Kl.png","inline-console":true}

inlet.js

var svg, data, lines, lines2;

data  = [ { angle:   120, width: 3 } ] //,
//          { angle: 120, width: 4 },
//          { angle: 260, width: 2 } ]

data = data.map(function(obj) {
  obj.angle = deg2rad(obj.angle);
  return obj;
});

svg = d3.select("svg");

function origin() {
  return  { x: tributary.sw / 2,
            y: tributary.sh / 2 }
}

function deg2rad(degrees) {
	return degrees * Math.PI / 180;
}

function endpoint(origin, rads, length) {
  return {
    x: origin.x + length * Math.cos(rads),
    y: origin.y + length * Math.sin(rads)
  }
}

lines = svg.selectAll('line')
  .data(data)
  .enter()
  .append('line')

lines
  .attr('x1', function() { return origin().x })
  .attr('y1', function() { return origin().y })
  .attr('x2', function(d) {return endpoint(origin(), d.angle, 1000).x; })
  .attr('y2', function(d) { return endpoint(origin(), d.angle, 1000).y; })
  .attr('stroke', 'blue')

lines2 = svg.selectAll('line.line2')
  .data(data)
  .enter()
  .append('line')

var radDelta = Math.PI / 2;
lines2
  .attr('x1', function(d) {
    var len = d.width,
        originX = origin().x,
        endpointX = endpoint(origin(), d.angle + radDelta, len).x;
    
    return originX - endpointX;
  })
  .attr('y1', function(d) {
    var len = d.width,
        originY = origin().y,
        endpointY = endpoint(origin(), d.angle + radDelta, len).y;
    
    return originY - endpointY;
    
  })
  .attr('x2', function(d) {
    var len = d.width,
        originX = origin().x,
        endpointX = endpoint(origin(), d.angle + radDelta, len).x;
    
    return originX + endpointX;
  })
  .attr('y2', function(d) {
    var len = d.width;
        originY = origin().y,
        endpointY = endpoint(origin(), d.angle + radDelta, len).y;
    
    return originY + endpointY;
    
  })
  .attr('stroke', 'red')