title: Uncaught SyntaxError: Unexpected token <
body: <p>I'm having a strange problem with a multi-line graph.  The graph depicts data from a mysql database where new rows are added in 5 second intervals to simulate "live" data.  The graph is then updated in 5 second intervals when the data is re-pulled from database.</p>
  
  <p>The "streaming" stops and starts - with 3 of these errors every time the updated data pulled in:</p>
  
  <pre><code> Uncaught SyntaxError: Unexpected token &lt; 
   d3_json 
   respond
  </code></pre>
  
  <p>The data is applied to each path/line as follows:</p>
  
  <pre><code> var parameter = svg.selectAll(".parameter")
      .data(data, function(d) { return d.key; })
      .enter().append("g")
      .attr("class", "parameter");
  
   parameter.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.key); });
  </code></pre>
  
  <p>..then updated data read in in 5 second intervals and graph updated and transitioned accordingly:</p>
  
  <pre><code> d3.json("LiveData.php", function(error, data) 
   {      
      color.domain(d3.keys(data[0]).filter(function(key) { return key ==  "testSource_id"; }));
      data = data.map( function (d) { 
      d.testSource_id = +d.testSource_id; 
      d.dateTimeTaken = parseDate(d.dateTimeTaken);
      d.reading = +d.reading;
      d.parameterType = d.parameterType;
      d.parameter_id = +d.parameter_id;
      return d;
   });
  
  data = d3.nest().key(function(d) { return d.testSource_id; }).entries(data);
  
  x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return  d.dateTimeTaken; }); }),
  d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.dateTimeTaken; }); })]);
  y.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.reading; }); }),
  d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.reading; });})]);
  
  var newparameters = svg.selectAll("g.parameter")
       .data(data);
  
  newparameters
       .select( "path.line" )
       .transition() 
       .ease("linear")
       .duration(750) 
       .attr( "d", function(d) { return line(d.values); })
  
  svg.select(".x.axis")
      .transition()
      .duration(750)
      .ease("linear")
      .call(xAxis);
  
  svg.select(".y.axis")
      .transition()
      .duration(750)
      .ease("linear")
      .call(yAxis); 
  </code></pre>
  
  <p>I don't know if this is caused by the way I'm transitioning the path/line or could it be something to do with how the data is pulled in from database?  Can anyone help?</p>