Unable to get zoom by dragging a rectangle over a d3 series chart to work properly

Question

I am trying to get zoom to work by dragging a rectangle over my series plot to identify the interval of zooming. Here is my plunkr

http://plnkr.co/edit/isaHzvCO6fTNlXpE18Yt?p=preview

You can see the issue by drawing a rectangle with the mouse over the chart - The new chart overshoots the boundary of the X and Y axes. I thought my group under the svg would take care of the bounds of the series (path) but I am clearly mistaken. After staring at it for a long time, I could not figure it out. Please ignore the angular aspect of the plunkr. I think the issue is somewhere in the

//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 help with this is appreciated.

Thank you very much.

Answer 1

I think the method renderChartWithinSpecifiedInterval(minX, maxX, minY, maxY, pixelCoordinates) maybe has some problem there.

It seems the parameter like max_x passed in line 130 are a very big value like time seconds

var svg = renderChartWithinSpecifiedInterval(min_X, max_X, min_Y, max_Y, false);
max_X,min_X are value like 1415171404335
min_Y = 0, max_Y = 100    

But in dragDrop call in line 192

function gEnd(d,i){
                    svg.selectAll(".zoom-rect").remove();
                    var svgGp = svg.select("g");
                    var groupTransform = d3.transform(svgGp.attr("transform"));
                    var xOffset = groupTransform.translate[0];
                    var yOffset = groupTransform.translate[1];
                    var xBegin = Math.min(xStart,xDyn) - xOffset;
                    var xEnd = Math.max(xStart,xDyn) - xOffset;
                    var yBegin = Math.min(yStart,yDyn)  - yOffset;
                    var yEnd =  Math.max(yStart,yDyn)  - yOffset;
                    renderChartWithinSpecifiedInterval(xBegin, xEnd, yBegin, yEnd, true);
                    //It seems here the parameters values are all pixels
                      like xBegin = 100, xEnd = 200
                }

hope it helps!