javascript - Updating domain values of multiline graph after line drag event -

javascript - Updating domain values of multiline graph after line drag event -

i developing simple multi-line graph dual time axes , zooming/dragging features. please take @ jsfiddle.

i trying implement drag feature on line graph, whereupon dragging particular line result in respective axis getting updated. every time drag applied graph, trying update domain values of respective axis, , redraw both axis , line graph.

here logic implemented update domain values (referenced d3 example):

var mousepoint = d3.mouse(this); x1 = x1scale.domain()[0], x2 = x1scale.domain()[1], console.log("x1 = "+x1+", x2 = " +x2); xextent = x1 - x2; x1 += mousepoint[0]; x2 += mousepoint[0]; var newdomain = [x1, x2]; x1scale.domain(newdomain);

when implement logic, nan error. right way update domain values after drag? if so, how solve nan error , accomplish desired functionality?

it of import convert numbers date objects, there typo in code (data1[0].time instead of data1[0].date). shouldn't multiply 1000, since info in milliseconds. in drag code, of import convert date objects numbers, in order += work on them. of course of study need convert them date when setting domain again.

function draggeddata1(d) { console.log("dragging of data1 going on!!") var mousepoint = d3.mouse(this); var x1 = x1scale.domain()[0].valueof(); //date number var x2 = x1scale.domain()[1].valueof(); var xextent = x1 - x2; x1 += mousepoint[0]; x2 += mousepoint[0]; var newdomain = [new date(x1), new date(x2)]; //number date x1scale.domain(newdomain); redraw(); zoombottom.x(x1scale); zoom.x(x2scale); }

i've created fiddle total code , fixes here: http://jsfiddle.net/pb3cod6q/2/

javascript jquery svg d3.js data-visualization