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

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

i trying zoom work dragging rectangle on series plot identify interval of zooming. here plunkr

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

you can see issue drawing rectangle mouse on chart - new chart overshoots boundary of x , y axes. thought grouping under svg take care of bounds of series (path) mistaken. after staring @ long time, not figure out. please ignore angular aspect of plunkr. think issue somewhere in

//build series grouping var series = svggroup.selectall(".series") .data(data) .enter().append("g") .attr("class", "series"); //build each series using line function series.append("path") .attr("class", "line") .attr("d", function (d) { homecoming line(d.series); }) .attr("id", function (d) { //while generating id each series, map series name path element. //this useful later on dealing legend clicks enable/disable plots legendmap[d.name] = this; //build series id homecoming buildpathid(d.name); }) .style("stroke", function (d) { //use series name color plotting homecoming colorfcn(d.name); }) .style("stroke-width", "1px") .style("fill", "none");

any help appreciated.

thank much.

i think method renderchartwithinspecifiedinterval(minx, maxx, miny, maxy, pixelcoordinates) maybe has problem there.

it seems parameter max_x passed in line 130 big value time seconds

var svg = renderchartwithinspecifiedinterval(min_x, max_x, min_y, max_y, false); max_x,min_x value 1415171404335 min_y = 0, max_y = 100

but in dragdrop phone 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 parameters values pixels xbegin = 100, xend = 200 }

hope helps!

javascript angularjs svg d3.js