Delete a line when ticks are clicked - d3js - d3.js

Question

I have two y-axis with time as data.
I am trying to add and delete a line when ticks are clicked on the respective axis.
Lines are getting generated but not sure how to remove the lines. i tried using
svg.data([thisData]).remove('line')
but that removes the chart completely.
MORE DETAILS
there is 1-1 relationship between ticks of respective axis.
var data = [{
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-26T00:00:00-05:00",
"outTime": "2013-04-26T00:00:00-05:00"
},
];
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
},
width = 600,
height = 700;
//Define Left Y axis
var y = d3.time.scale()
.domain([new Date(data[0].inTime), d3.time.day.offset(new Date(data[data.length - 1].inTime), 1)])
.rangeRound([0, width - margin.left - margin.right]);
//Define Right Y axis
var y1 = d3.time.scale()
.domain([new Date(data[1].inTime), d3.time.day.offset(new Date(data[data.length - 1].outTime), 1)])
.rangeRound([0, width - margin.left - margin.right]);
//Left Yaxis attributes
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickFormat(d3.time.format('%m/%d %H:%M'))
.tickSize(8)
.tickPadding(8);
//Right Yaxis attributes
var yAxisRight = d3.svg.axis()
.scale(y1)
.orient('right')
.tickFormat(d3.time.format('%m/%d %H:%M'))
.tickSize(8)
.tickPadding(8);
//Create chart
var svg = d3.select('body').append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
//Add left Yaxis to group
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(100, 5)')
.call(yAxis);
//Add right Yaxis to group
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(400, 1)')
.call(yAxisRight);
var parse = d3.time.format('%m/%d %H:%M');
//Function to add a line between two ticks
function addLine(t1, t2) {
var ticks = {};
d3.selectAll('.tick text').each(function(d) {
ticks[d3.select(this).text()] = this;
});
var pos1 = ticks[t1].getBoundingClientRect();
var pos2 = ticks[t2].getBoundingClientRect();
svg.append('line')
.attr('x1', pos1.top - pos1.width)
.attr('y1', pos1.top + 5)
.attr('x2', pos2.left - 5)
.attr('y2', pos2.top + 5)
.style('stroke', 'black')
}
var ticks = svg.selectAll(".tick");
ticks.attr('class', function(d, i) {
return 'ticks' + i;
}).each(function(d, i) {
d3.select(this).append("circle")
.attr('id', function(d) {
return 'tickCircle' + i;
})
.attr('class', function(d) {
return 'tickCircles' + this.id
})
.attr("r", 5)
.on('click', function(d) {
console.log('clicked')
return addLineNew(this);
})
.on('mouseover', function(d){
d3.select(this).style('fill','red'); })
.on('mouseout', function(d){
d3.select(this).style('fill','black'); })
});
ticks.selectAll("line").remove();
var firstTick;
var secondTick;
var secondTickMap={};
var firstTickMap={};
var allLines=[];
//add Line
function addLineNew(element) {
if (firstTick && secondTick) {
firstTick = '';
secondTick = '';
}
if (!firstTick || firstTick === '') {
firstTick = element.id
}
else if ((secondTick != 'undefined' || secondTick === '') && !(secondTick in firstTickMap)) {
secondTick = element.id
}
if (firstTick && secondTick) {
if(firstTick == secondTick){
if(firstTick in firstTickMap){delete firstTickMap.firstTick;}
else if(firstTick in secondTickMap){delete secondTickMap.firstTick;}
if(secondTick in firstTickMap){delete firstTickMap.secondTick;}
else if(secondTick in secondTickMap ){delete secondTickMap.secondTick;}
}
if(!(firstTick in firstTickMap) && !(secondTick in secondTickMap) && !(firstTick in secondTickMap) && !(secondTick in firstTickMap))
{
var firstTickBBox = getBBox(firstTick)
var secondTickBBox = getBBox(secondTick);
var firstTickPos = getCenterPoint(firstTickBBox);
var secondTickPos = getCenterPoint(secondTickBBox);
firstTickMap[firstTick] = firstTick;
secondTickMap[secondTick] = secondTick;
createLine(firstTickPos, secondTickPos)
}
}
}
//get Center Point
function getCenterPoint(element) {
var thisX = element.left + element.width / 2;
var thisY = element.top + element.height / 2;
return [thisX, thisY]
}
function getBBox(element) {
var thisEl = document.getElementById(element).getBoundingClientRect();
return thisEl;
}
//create a line between pointA and pointB
function createLine(pointA, pointB) {
var thisData = {
x1: pointA[0],
y1: pointA[1],
x2: pointB[0],
y2: pointB[1]
};
allLines.push(svg.data([thisData]).append('line')
.attr('x1', function(d) {
console.log(d)
return d.x1;
})
.attr('y1', function(d) {
return d.y1;
})
.attr('x2', function(d) {
return d.x2;
})
.attr('y2', function(d) {
return d.y2;
}).style('stroke', 'black')
.style('stroke-width','1')
.attr('transform', 'translate(' + (-margin.left - 5) + ', ' + (- margin.top - 5) + ')'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

First off lets clear a couple of things up. When you create the line you push your array of lines to an array like so :
allLines.push(svg.data([thisData]).append('line')...
This is not the correct way to do it. The best way to do it is, when you create a line, push that lines data, e.g x1,y1,x2,y2 etc to an array and use this array to create all the lines at once. This is how D3 works.
So I changed your functions around.
function createLine(pointA, pointB) {
var thisData = {
x1: pointA[0],
y1: pointA[1],
x2: pointB[0],
y2: pointB[1]
};
allLinesData.push(thisData) //push points into array
drawLines(allLinesData); //draw all lines at once from 'allLinesData'
}
Function to draw lines :
function drawLines(data) { //pass the data you want
var line = svg.selectAll('.line').data(data);
line.enter().append('line')
.attr('id', function(d, i) {return 'genLine' + i; })
.attr('x1', function(d) { return d.x1;})
.attr('y1', function(d) { return d.y1; })
.attr('x2', function(d) { return d.x2; })
.attr('y2', function(d) { return d.y2; })
.style('stroke', 'black')
.style('stroke-width', '3')
.on('mouseover', function(d) { d3.select(this).style('stroke', 'red') })
.on('mouseout', function(d) { d3.select(this).style('stroke', 'black') })
.attr('transform', 'translate(' + (-margin.left - 5) + ', ' + (-margin.top - 5) + ')')
line.on('dblclick', function(d) { //delete line
var thisLine = this;
line.each(function(e, i) {
var thisLine2 = this;
if (thisLine.id === thisLine2.id) {
console.log('splice')
allLinesData.splice(i--, 1); //remove from array you use to feed the line drawer
d3.select(this).remove(); //remove it from DOM
}
})
})
line.exit().remove(); //remove unwanted lines
}
Also added on 'mouseover' so you know what line youre on.
Here is a working fiddle : https://jsfiddle.net/reko91/vr09w905/1/
Also if you just want it here :
var data = [{
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-24T00:00:00-05:00",
"outTime": "2013-04-24T00:00:00-05:00"
}, {
"inTime": "2013-04-26T00:00:00-05:00",
"outTime": "2013-04-26T00:00:00-05:00"
}, ];
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
},
width = 600,
height = 700;
//Define Left Y axis
var y = d3.time.scale()
.domain([new Date(data[0].inTime), d3.time.day.offset(new Date(data[data.length - 1].inTime), 1)])
.rangeRound([0, width - margin.left - margin.right]);
//Define Right Y axis
var y1 = d3.time.scale()
.domain([new Date(data[1].inTime), d3.time.day.offset(new Date(data[data.length - 1].outTime), 1)])
.rangeRound([0, width - margin.left - margin.right]);
//Left Yaxis attributes
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickFormat(d3.time.format('%m/%d %H:%M'))
.tickSize(8)
.tickPadding(8);
//Right Yaxis attributes
var yAxisRight = d3.svg.axis()
.scale(y1)
.orient('right')
.tickFormat(d3.time.format('%m/%d %H:%M'))
.tickSize(8)
.tickPadding(8);
//Create chart
var svg = d3.select('body').append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
//Add left Yaxis to group
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(100, 5)')
.call(yAxis);
//Add right Yaxis to group
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(400, 1)')
.call(yAxisRight);
var parse = d3.time.format('%m/%d %H:%M');
//Function to add a line between two ticks
function addLine(t1, t2) {
var ticks = {};
d3.selectAll('.tick text').each(function(d) {
ticks[d3.select(this).text()] = this;
});
var pos1 = ticks[t1].getBoundingClientRect();
var pos2 = ticks[t2].getBoundingClientRect();
svg.append('line')
.attr('x1', pos1.top - pos1.width)
.attr('y1', pos1.top + 5)
.attr('x2', pos2.left - 5)
.attr('y2', pos2.top + 5)
.style('stroke', 'black')
}
var ticks = svg.selectAll(".tick");
ticks.attr('class', function(d, i) {
return 'ticks' + i;
}).each(function(d, i) {
d3.select(this).append("circle")
.attr('id', function(d) {
return 'tickCircle' + i;
})
.attr('class', function(d) {
return 'tickCircles' + this.id
})
.attr("r", 5)
.on('click', function(d) {
console.log('clicked')
return addLineNew(this);
})
.on('mouseover', function(d) {
d3.select(this).style('fill', 'red');
})
.on('mouseout', function(d) {
d3.select(this).style('fill', 'black');
})
});
ticks.selectAll("line").remove();
var firstTick;
var secondTick;
var secondTickMap = {};
var firstTickMap = {};
//var allLines = [];
var allLinesData = [];
//add Line
function addLineNew(element) {
if (firstTick && secondTick) {
firstTick = '';
secondTick = '';
}
if (!firstTick || firstTick === '') {
firstTick = element.id
} else if ((secondTick != 'undefined' || secondTick === '') && !(secondTick in firstTickMap)) {
secondTick = element.id
}
if (firstTick && secondTick) {
if (firstTick == secondTick) {
if (firstTick in firstTickMap) {
delete firstTickMap.firstTick;
} else if (firstTick in secondTickMap) {
delete secondTickMap.firstTick;
}
if (secondTick in firstTickMap) {
delete firstTickMap.secondTick;
} else if (secondTick in secondTickMap) {
delete secondTickMap.secondTick;
}
}
if (!(firstTick in firstTickMap) && !(secondTick in secondTickMap) && !(firstTick in secondTickMap) && !(secondTick in firstTickMap)) {
var firstTickBBox = getBBox(firstTick)
var secondTickBBox = getBBox(secondTick);
var firstTickPos = getCenterPoint(firstTickBBox);
var secondTickPos = getCenterPoint(secondTickBBox);
firstTickMap[firstTick] = firstTick;
secondTickMap[secondTick] = secondTick;
createLine(firstTickPos, secondTickPos)
}
}
}
//get Center Point
function getCenterPoint(element) {
var thisX = element.left + element.width / 2;
var thisY = element.top + element.height / 2;
return [thisX, thisY]
}
function getBBox(element) {
var thisEl = document.getElementById(element).getBoundingClientRect();
return thisEl;
}
//create a line between pointA and pointB
function createLine(pointA, pointB) {
var thisData = {
x1: pointA[0],
y1: pointA[1],
x2: pointB[0],
y2: pointB[1]
};
allLinesData.push(thisData) //push points into array
drawLines(allLinesData); //draw all lines at once from 'allLinesData'
}
function drawLines(data) { //pass the data you want
var line = svg.selectAll('.line').data(data);
line.enter().append('line')
.attr('id', function(d, i) {
return 'genLine' + i;
})
.attr('x1', function(d) {
return d.x1;
})
.attr('y1', function(d) {
return d.y1;
})
.attr('x2', function(d) {
return d.x2;
})
.attr('y2', function(d) {
return d.y2;
})
.style('stroke', 'black')
.style('stroke-width', '3')
.on('mouseover', function(d) {
d3.select(this).style('stroke', 'red')
})
.on('mouseout', function(d) {
d3.select(this).style('stroke', 'black')
})
.attr('transform', 'translate(' + (-margin.left - 5) + ', ' + (-margin.top - 5) + ')')
line.on('dblclick', function(d) { //delete line
var thisLine = this;
line.each(function(e, i) {
var thisLine2 = this;
if (thisLine.id === thisLine2.id) {
console.log('splice')
allLinesData.splice(i--, 1); //remove from array you use to feed the line drawer
d3.select(this).remove(); //remove it from DOM
}
})
})
line.exit().remove(); //remove unwanted lines
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>