LineTool example

#Line Tool

The purpose of this plugin is to make working with line segments a little easier.

You can drag the target node around to see the values update.

Source: https://github.com/stephen101/d3-plugins/tree/master/src/lineTool

Instantiation

To create new line tool

var lt = lineTool()
            .x(source_pos.x)
            .y(source_pos.y)
            .x1(x)
            .y1(y)

Calculate angle

To calculate the angle from horizontal between the source and destination points:

lt.angle()

Calculate distance

To calculate the distance between the source and destination points:

lt.dist()

<!doctype html>
	<body>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style>
      #example {
      	width: 1000px;
      	height: 400px;
      	margin: 0 auto;
      	background-color: #fff;
      }
      
      .source, .destination {
      	fill: #333;
      }
      
      .destination {
      	cursor:move;
      }

.line_segment {
      	stroke: #333;
      }
      
      .axis {
      	stroke: #555;
      	stroke-width: 0.5px;
      }
      
      .angle, .dist {
      	text-anchor: middle;
      	fill: #333;
      	font-size: 16px;
      	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
         	font-weight: 100;
      }
		</style>

<div id="example">
			<svg id="svg_root">
			</svg>
		</div>
		<script type="text/javascript">
		this.lineTool = function() {

var x,y,x1,y1;
		
			layout.x = function(_) {
			    if (!arguments.length) return x;
			    x = _;
			    return layout;
			};
		
			layout.y = function(_) {
			    if (!arguments.length) return y;
			    y = _;
			    return layout;
			};
		
			layout.x1 = function(_) {
			    if (!arguments.length) return x1;
			    x1 = _;
			    return layout;
			};
		
			layout.y1 = function(_) {
			    if (!arguments.length) return y1;
			    y1 = _;
			    return layout;
			};
		
			layout.angle = function() {
				return 180 - Math.atan2(y - y1, x - x1) * 180 / Math.PI;
			}
		
			layout.dist = function() {
				var dx = x1 - x;
				var dy = y1 - y;
				return Math.sqrt(dx * dx + dy * dy)
			}
		
		
			function layout() {
		
			}
		
			return layout;
		}
		  function render() {
		        var width = 1000,
		            height = 400,
		            control_width = 0
		            center_x = control_width + (width - control_width) / 2,
		            center_y =  height  / 2,
		            control_point_radius = 6,
		            source_pos = { 
		                x: center_x, 
		                y: center_y
		            },
		            dest_pos = {
		                x: center_x + 100, 
		                y: center_y - 100
		            };
		    
		        function update(x, y) {
		            dest
		                .attr("cx", x)
		                .attr("cy", y)
		    
		            line
		                .attr("x2", x)
		                .attr("y2", y)
		    
		            var lt = lineTool()
		                        .x(source_pos.x)
		                        .y(source_pos.y)
		                        .x1(x)
		                        .y1(y)
		    
		            angle.text("Angle: " + Math.round(lt.angle()) + " Deg");
		            dist
		                .attr("x", x)
		                .attr("y", y - 20)
		                .text("Length: " + Math.round(lt.dist()) + "px");
		        }
		    
		        function drawAxes() {
		            svg_root
		                .append("line")
		                    .attr("class", "axis")
		                    .attr("x1", source_pos.x)
		                    .attr("y1", source_pos.y-100)
		                    .attr("x2", source_pos.x)
		                    .attr("y2", source_pos.y+100);
		    
		            svg_root
		                .append("line")
		                    .attr("class", "axis")
		                    .attr("x1", source_pos.x - 300)
		                    .attr("y1", source_pos.y)
		                    .attr("x2", source_pos.x + 300)
		                    .attr("y2", source_pos.y);
		        }
		    
		        var svg_root = d3.select("#svg_root");
		        drawAxes();
		    
		        var drag = d3.behavior.drag()
		            .on("drag", function(d,i) {
		                var x = d.x += d3.event.dx
		                var y = d.y += d3.event.dy
		                update(x,y);
		            });
		    
		        var line = svg_root
		            .append("line")
		                .attr("class", "line_segment")
		                .attr("x1", source_pos.x)
		                .attr("y1", source_pos.y)
		                .attr("x2", dest_pos.x)
		                .attr("y2", dest_pos.y);
		    
		        svg_root
		            .append("circle")
		                .datum(source_pos)
		                .attr("class", "source")
		                .attr("r", control_point_radius)
		                .attr("cx", source_pos.x)
		                .attr("cy", source_pos.y);
		    
		        var angle = svg_root
		            .append("text")
		                .attr("class", "angle")
		                .attr("x", source_pos.x)
		                .attr("y", source_pos.y + 30)
		    
		        var dist = svg_root
		            .append("text")
		                .attr("class", "dist")
		    
		        var dest = svg_root
		            .append("circle")
		                .datum(dest_pos)
		                .attr("class", "destination")
		                .attr("r", control_point_radius)
		                .call(drag);
		    
		        update(dest_pos.x, dest_pos.y)
		    
		    }
			render();
		</script>
	</body>

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

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