d3 horizontal and vertical lines
HTML
<button id='horizontal'>Horizontal Line</button>
<button id='vertical'>Vertical Line</button>
CSS
svg {
border: solid 1px;
}
.horizontal {
stroke: goldenrod;
stroke-width: 5px;
}
.vertical {
stroke: silver;
stroke-width: 5px;
}
JavaScript
d3.select('#horizontal').on('click', function(){ new Horizontal(); });
d3.select('#vertical').on('click', function(){ new Vertical(); });
var w = 600, h = 500;
var svg = d3.select('body').append('svg').attr({width: w, height: h});
function Horizontal() {
var self = this;
var m, m1, m2, horizontal, isDown = false, isDragging = true, click = 1, pathArray = [], pathArray1 = [],
x1, y1, x2, y2, slope, isLeft;
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
svg.on('mousedown', function() {
isDown = !isDown;
m1 = d3.mouse(this);
self.pathArray = [{ x: m1[0], y: m1[1] }, { x: 0, y: m1[1] }, { x: w, y: m1[1] } ];
if(!isDragging) {
if(click == 1){
self.horizElement = d3.select('svg').append('path').attr({'class': 'horizontal'});//.call(dragP);
updatePath();
}
} else {
isDragging = true;
}
click++;
})
.on('mousemove', function() {
m2 = d3.mouse(this);
if (isDown && !isDragging && click == 2) {
updatePath();
}
});
function updatePath() {
horizontal = d3.select(self.horizElement[0][0]).data(self.pathArray);
horizontal.attr('d', lineFunction(self.pathArray));
}
}
function Vertical() {
var self = this;
var m, m1, m2, horizontal, isDown = false, isDragging = false, click = 1, pathArray = [], pathArray1 = [],
x1, y1, x2, y2, slope, isLeft;
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
svg.on('mousedown', function() {
isDown = !isDown;
m1 = d3.mouse(this);
...