#Line Tool
The purpose of this plugin is to make working with line segments a little easier.
Source: https://github.com/stephen101/d3-plugins/tree/master/src/lineTool
To create new line tool
var lt = lineTool()
.x(source_pos.x)
.y(source_pos.y)
.x1(x)
.y1(y)To calculate the angle from horizontal between the source and destination points:
lt.angle()To calculate the distance between the source and destination points:
lt.dist()| <!doctype html> | |
| <body> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="example.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/stephen101/d3-plugins/master/src/lineTool/lineTool.js"></script> | |
| <style> | |
| #example { | |
| width: 1000px; | |
| height: 400px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| } | |
| .source, .destination { | |
| fill: #333; | |
| } | |
| .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(Math.round(lt.angle()) + "°"); | |
| dist | |
| .attr("x", x) | |
| .attr("y", y - 20) | |
| .text(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> |
