I am having trouble implementing zoom functionality by dragging a rectangle over my series plot to specify the zoom interval. Here is the link to my plunkr:
http://plnkr.co/edit/isaHzvCO6fTNlXpE18Yt?p=preview
When I draw a rectangle over the chart using the mouse, the new chart extends beyond the boundaries of the X and Y axes. I initially believed that my group under the svg would handle the bounds of the series (path), but it seems I was wrong. Despite examining it closely for a while, I couldn't find a solution. Please disregard the angular aspect of the plunkr. I suspect the issue lies somewhere in the following code:
//Build series group
var series = svgGroup.selectAll(".series")
.data(data)
.enter().append("g")
.attr("class", "series");
//Build each series using the line function
series.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.series);
})
.attr("id", function (d) {
//While generating the id for each series, map series name to the path element.
//This is useful later on for dealing with legend clicks to enable/disable plots
legendMap[d.name] = this;
//Build series id
return buildPathId(d.name);
})
.style("stroke", function (d) {
//Use series name to get the color for plotting
return colorFcn(d.name);
})
.style("stroke-width", "1px")
.style("fill", "none");
Any assistance on this matter would be greatly appreciated.
Thank you kindly.