D3 updated data not propagated to mouseover event - d3.js

Question

I have a multi series line chart where I can choose to display data based on selected range of years. My line charts is working perfectly fine except for the tooltips, it just doesn't get updated!
As you can see from above the tooltips display 1994~2013 instead of 2002~2008.
var crimeRate = multiLineChart.selectAll(".crimeRate")
.data(rateCol);
//console.log("new_data", rateCol);
crimeRate.exit().remove();
var crimeRateEnter = crimeRate.enter().append("g")
.attr("class", "crimeRate");
crimeRateEnter.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return z(d.id);
})
.on("mouseover", function(d) {
var xPosition = d3.mouse(this)[0];
var yPosition = d3.mouse(this)[1] - 30;
//console.log("Mouse X =", d3.mouse(this)[0], "\nMouse Y =", d3.mouse(this)[1]);
//Prevent tooltips from going out of screen
if (d3.mouse(this)[0] > (0.9 * svgLine.attr("width"))) {
xPosition = xPosition - 0.05 * svgLine.attr("width");
}
if (d3.mouse(this)[1] < (0.1 * svgLine.attr("height"))) {
yPosition = yPosition + (0.1 * svgLine.attr("height")) + 50;
}
//console.log("is it correct?", rateCol);
var currentCrimeType = d.id,
currentMinYear = getCrimeMinYear(currentCrimeType),
currentMaxYear = getCrimeMaxYear(currentCrimeType),
diffMinMax = getCrimeRateDiff(currentCrimeType, currentMinYear, currentMaxYear),
percDiff = diffMinMax[0],
rateMin = diffMinMax[1],
rateMax = diffMinMax[2];
var boxXPos = xPosition - 80;
var boxYPos = yPosition - 60;
multiLineChart.append("rect")
.attr("class", "tooltipBox")
.attr("rx", 10)
.attr("ry", 10)
.attr("id", "textBox")
.attr("x", boxXPos)
.attr("y", boxYPos)
.attr("width", 180)
.attr("height", 75)
.attr("stroke", "black")
.style("fill", "white")
.style("opacity", 0.7);
multiLineChart.append("text")
.attr("class", "tooltipText")
.attr("id", "tooltip")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 10)
.attr("text-anchor", "middle")
.attr("font-family", "Open Sans")
.attr("font-size", "16px")
.attr("fill", "black")
.attr("text-anchor", "start")
.append("tspan")
.attr("font-weight", "bold")
.attr("font-style", "italic")
.attr("font-size", "18px")
.attr("float", "left")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 20)
.text(getFullName(d))
.append("tspan")
.attr("float", "left")
.attr("font-weight", "normal")
.attr("font-style", "normal")
.attr("font-size", "16px")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 35)
.text("Dropped by " + percDiff + "%")
.append("tspan")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 50)
.text("From " + rateMin + " to " + rateMax)
.append("tspan")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 65)
.text("In year " + currentMinYear + " to " + currentMaxYear);
d3.select(this)
.style("stroke", "#FFFF00")
.style("stroke-width", "5px");
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
d3.select("#textBox").remove();
d3.select(this)
.style("stroke", function(d) {
return z(d.id);
})
.style("stroke-width", "2px")
});
crimeRate.select("path")
.transition()
.duration(1000)
.attr("d", function(d) {
return line(d.values);
});
Codes above are responsible for the line and mouseover events.
Any help is appreciated, Thanks in advance!

Answer 1

After hours of researching, I found a solution.
For anyone having the same problem and stumble upon this, I solved it by separating the mouseover function and I select the "path" element and specify the mouseover event here.
Code Snippet:
var crimeRate = multiLineChart.selectAll(".crimeRate")
.data(rateCol);
//console.log("new_data", rateCol);
crimeRate.exit().remove();
var crimeRateEnter = crimeRate.enter().append("g")
.attr("class", "crimeRate");
crimeRateEnter.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
crimeRate.select("path")
.transition()
.duration(1000)
.attr("d", function(d) {
return line(d.values);
});
crimeRate.select("path")
.on("mouseover", function(d) {
var xPosition = d3.mouse(this)[0];
var yPosition = d3.mouse(this)[1] - 30;
//console.log("Mouse X =", d3.mouse(this)[0], "\nMouse Y =", d3.mouse(this)[1]);
//Prevent tooltips from going out of screen
if (d3.mouse(this)[0] > (0.9*svgLine.attr("width"))){
xPosition = xPosition - 0.05 * svgLine.attr("width");
}
if (d3.mouse(this)[1] < (0.1*svgLine.attr("height"))){
yPosition = yPosition + (0.1*svgLine.attr("height")) + 50;
}
//console.log("is it correct?", rateCol);
var currentCrimeType = d.id,
currentMinYear = getCrimeMinYear(currentCrimeType),
currentMaxYear = getCrimeMaxYear(currentCrimeType),
diffMinMax = getCrimeRateDiff(currentCrimeType,currentMinYear,currentMaxYear),
percDiff = diffMinMax[0],
rateMin = diffMinMax[1],
rateMax = diffMinMax[2];
var boxXPos = xPosition - 80;
var boxYPos = yPosition - 60;
multiLineChart.append("rect")
.attr("class", "tooltipBox")
.attr("rx", 10)
.attr("ry", 10)
.attr("id","textBox")
.attr("x", boxXPos)
.attr("y", boxYPos)
.attr("width", 180)
.attr("height",75)
.attr("stroke","black")
.style("fill","white")
.style("opacity", 0.7);
multiLineChart.append("text")
.attr("class", "tooltipText")
.attr("id", "tooltip")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 10)
.attr("text-anchor", "middle")
.attr("font-family", "Open Sans")
.attr("font-size", "16px")
.attr("fill", "black")
.attr("text-anchor","start")
.append("tspan")
.attr("font-weight", "bold")
.attr("font-style", "italic")
.attr("font-size", "18px")
.attr("float","left")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 20)
.text(getFullName(d))
.append("tspan")
.attr("float","left")
.attr("font-weight", "normal")
.attr("font-style", "normal")
.attr("font-size", "16px")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 35)
.text("Dropped by " + percDiff + "%")
.append("tspan")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 50)
.text("From " + rateMin + " to " + rateMax)
.append("tspan")
.attr("x", boxXPos + 10)
.attr("y", boxYPos + 65)
.text("In year " + currentMinYear + " to " + currentMaxYear);
d3.select(this)
.style("stroke", "#FFFF00")
.style("stroke-width", "5px");
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
d3.select("#textBox").remove();
d3.select(this)
.style("stroke", function(d) { return z(d.id); })
.style("stroke-width", "2px")
});