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

I am developing a simple multi-line graph with double time axes and zooming / dragging features. Please look at me

I am trying to apply the drag feature to the line graph, where dragging a particular line will also update it in its respective axis. Every time the drag is applied to the graph, I am trying to update the domain value of the related axis, and underline the axis and line graph.

Here is the argument that I implemented to update the domain value (referenced from one):

  var mousepoint = D. 3. 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 I apply this argument , I get a NaN error Is this the correct way to update domain values ​​after drag? If so, how do I solve the NaN error and get the desired functionality?

< P>

It is important to change the number of numbers Note, in your code, a typo (Data 1 [0]. Data was time of [1].) Apart from this, you should not multiply by 1000, because your data was already in millisecond. In your drag code, It is also important to change your date objects back to number, in order ++ will work on them. Of course, when you set the domain again, you have to change them back.

Drew the function Gone Data1 (d) {console.log ("Date Pulling to 1 !! ") var mousepoint = d3.mouse (this); Var x1 = x1Scale.domain () [0] .valueOf (); // Date to date 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 back x1Scale.domain (newDomain); Recreating (); ZoomBottom.x (x1Scale); Zoom.x (x2Scale); }

I have created a bella with full code and fixes: