title: D3.js - How to solve NAN error while dragging the line graph (Jsfiddle provided)
body: <p>I recently started working on D3.js. I am developing a interactive multiple line graph with dual x-axis. Please take a look at my work, JSFIDDLE is here : <code>http://jsfiddle.net/dalapati/cdkn14j3/1/</code></p>
  
  <pre><code>    data1 = [
                      {"date": 1357717800000,"value": "5.6"}, 
                      {"date": 1357718400000,"value": "5.6"}, 
                      {"date": 1357719000000,"value": "6"}, 
                      {"date": 1357719600000,"value": "5.1"},
                      {"date": 1357720200000,"value": "5.3"},
                      //{"date": 1357720800000,"value": "5.4"}
                  ];
  
      data2 = [
                      {"date": 1357714800000,"value": "5.2"},
                      {"date": 1357715400000,"value": "5.2"},
                      {"date": 1357716000000,"value": "5.2"}, 
                      {"date": 1357716600000,"value": "5.1"},
                      {"date": 1357717200000,"value": "5.5"}, 
              ]      
  
  // date manipulation to format UTC to js Date obj           
      data1.forEach(function(d){ d.time = new Date(d.time * 1000);});
      data2.forEach(function(d){ d.time = new Date(d.time * 1000);});
  
  // helpers and constants        
  var margin = {"top": 50, "right": 50, "bottom": 50, "left": 100, "axis": 55};
  var width = 1500 - margin.left - margin.right;
  var height = 580 - margin.top - margin.bottom;
  var timeFormat = d3.time.format("%X");
  
  // find data range
  var x1Domain = d3.extent(data1, function(d){ return d.date; });
  var x2Domain = d3.extent(data2, function(d){ return d.date; });
  
  var x1Min = d3.min(data1, function(d){ return Math.min(d.date); });
  var x1Max = d3.max(data1, function(d){ return Math.max(d.date); });
  
  var x2Min = d3.min(data2, function(d){ return Math.min(d.date); });
  var x2Max = d3.max(data2, function(d){ return Math.max(d.date); });
  
  var y1Min = d3.min(data1, function(d){ return Math.min(d.value); });
  var y1Max = d3.max(data1, function(d){ return Math.max(d.value); });
  
  var y2Min = d3.min(data2, function(d){ return Math.min(d.value); });
  var y2Max = d3.max(data2, function(d){ return Math.max(d.value); });
  
  var yMin = (y1Min &lt; y2Min) ? y1Min:y2Min;
  var yMax = (y1Max &gt; y2Max) ? y1Max:y2Max;
  
  // scales
  var x1Scale = d3.time.scale()
                      .domain(d3.extent(data1, function (d) {
                          return d.date;}))
                      .range([0, width]);
  var x2Scale = d3.time.scale()
                      .domain(d3.extent(data2, function (d) {
                          return d.date;}))
                      .range([0, width]);
  var yScale = d3.scale.linear()
                      .domain([yMin,yMax]).range([height, 0]); 
  
  // set up axes
  var x1Axis = d3.svg.axis()
                      .scale(x1Scale)
                      .orient("bottom")
                      .ticks(5)
                      .tickPadding(5)
                      .tickFormat(timeFormat);
  var x2Axis = d3.svg.axis()
                      .scale(x2Scale)
                      .orient("top")
                      .ticks(5)
                      .tickPadding(5)
                      .tickFormat(timeFormat);
  var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left")
                      .ticks(5);
  var make_y_axis = function () {
                              return d3.svg.axis()
                                  .scale(yScale)
                                  .orient("left")
                                  .ticks(5);
                          };
  
  // Set up chart type
  // create a line function that can convert data into x and y points
  var line1 = d3.svg.line().interpolate("basis")
                  .x(function (d) {
                      return x1Scale(d.date);
                  })
                  .y(function (d) {
                      return yScale(d.value);
                  });
  var line2 = d3.svg.line().interpolate("basis")
                  .x(function (d) {
                      return x2Scale(d.date);
                  })
                  .y(function (d) {
                      return yScale(d.value);
                  });
  
  
  //   Create Zoom feature
  var zoomBottom = d3.behavior.zoom()
                      .x(x1Scale)
                      //.y(yScale);
                      .scaleExtent([1,10]);
  var zoom = d3.behavior.zoom()
                      .x(x2Scale)
                      //.y(yScale)
                      .scaleExtent([1,10])
                      .on("zoom",zoomed);
  
  
  // Create Drag behaviour
  var drag = d3.behavior.drag()
              .origin(function(d){return d;})
              .on("dragstart", dragstarted)
              .on("drag", dragged)
              .on("dragend", dragended)
  
  
  // create svg container
  var svg = d3.select('#chart')
                  .append("svg:svg")
                  .attr('width', width + margin.left + margin.right)
                  .attr('height', height + margin.top + margin.bottom)
                  .append("svg:g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                  .call(zoom);
  
      svg.append("svg:rect")
                  .attr("width", width)
                  .attr("height", height)
                  .attr("class", "plot");
  
  function draw(){
   //Draw Axes
      svg.append("svg:g")
          .attr("class", "x axis axisBottom")
          .attr("transform", "translate(0, " + height + ")")
          .call(x1Axis);
  
      svg.append("svg:g")
          .attr("class", "x axis axisTop")
          .attr("transform", "translate(0, 0)")
          .call(x2Axis);
  
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  
  // grid plot
      svg.append("g")
          .attr("class", "y grid")
          .call(make_y_axis()
          .tickSize(-width, 0, 0)
          .tickFormat(""));
  
   // add lines
  // do this AFTER the axes above so that the line is above the tick-lines
  var clip = svg.append("svg:clipPath")
                      .attr("id", "clip")
                      .append("svg:rect")
                      .attr("x1Scale", 0)
                      .attr("x2Scale", 0)
                      .attr("yScale", 0)
                      .attr("width", width)
                      .attr("height", height);
  
  var chartBody = svg.append("g")
          .attr("clip-path", "url(#clip)");
  
  chartBody.append("svg:path")
          .datum(data1)
          .attr("class", "data1")
          .attr("d", line1(data1))
          .attr("cursor", "move")
          .call(drag);
  
      chartBody.append("svg:path")
          .datum(data2)
          .attr("class", "data2")
          .attr("d", line2(data2))
          .attr("cursor", "move")
          .call(drag);
      }  
  
      draw();  
  /************************** ADDING ZOOMING FEATURE****************************************/
  
  function zoomed() {
          //console.log(d3.event.translate);
          //console.log(d3.event.scale);        
          zoomBottom.scale(zoom.scale()).translate(zoom.translate());
          svg.select(".axisBottom").call(x1Axis);
          svg.select(".axisTop").call(x2Axis);
          svg.select(".y .axis").call(yAxis);
          svg.select(".grid").call(make_y_axis().tickSize(-width,0,0).tickFormat(""));
          svg.select(".data1").attr("d",line1(data1));
          svg.select(".data2").attr("d",line2(data2));
      }
  
  /***************** Adding Dragging feature*****************************************************/
  
  function dragstarted(d){
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("dragging", true);
  }
  
  function dragged(d){
      var lineToMove = d3.event.x;
      console.log(lineToMove);
      d3.select(this)
          .attr("cx", d[0] = d3.event.sourceEvent.x);
  }
  
  function dragended(d){
      d3.select(this).classed("dragging", false);
  }
  </code></pre>
  
  <p>As you see that there are two different line graphs, taken from different data sources and drawn with respect to two different x-axis. I am trying to implement dragging behavior to each line graph, where If I select one graph and drag it and keeping the other graph constant, the respective axis values should also get updated. </p>
  
  <p>But when I try to drag the line graph, I am getting a NAN error. I am not sure how to solve this error. Do anyone have any idea where I am going wrong.</p>
  
  <p>Thanks in advance.</p>