D3.js Scatterplot nicht korrekt auf Liniendiagramm

Question

Derzeit lerne ich D3.js und konfrontiert mit einem Problem. Mein Problem ist, dass wenn ich versuche, Streudiagramme zu meinem Liniendiagramm hinzuzufügen, die Plots an der falschen Stelle gerendert werden. Ich weiß nicht wirklich, was ich vermisse.

Die Funktion, die für die Erstellung des Scatterplot auf mousemove- Veranstaltung verantwortlich ist:

´var rect = svg.append("rect") 
     .attr("class", "zoom") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom) 
     .on('mousemove', function() { 
      var coords = d3.mouse(container.node()); 
      // Value on the x scale corresponding to this location 
      var xVal = x.invert(coords[0]); 
      var d = new Date(xVal.getTime()); 

      //show the closest point on the left 
      var i = 0; 
      while (i < JSONdata.measurementPoints.length - 1 && new Date(JSONdata.measurementPoints[i].measurementDateTime) <= d) { 
       i++; 
      } 

      var _date = new Date(JSONdata.measurementPoints[i].measurementDateTime), 
       _temp = JSONdata.measurementPoints[i].measurementValue; 
      d3.select("#actPoint").remove(); 
      // Update the position of the activePoint element 
      d3.select('svg').append('circle') 
       .attr("cx", x(_date)) 
       .attr("cy", y(_temp)) 
       .attr("r", 5) 
       .attr("pointer-events", "none") 
       .attr("id", "actPoint") 
       .style({ 
        'stroke': 'none', 
        'fill': 'red', 
        'fill-opacity': 0 
       }); 

      console.log(JSONdata.measurementPoints[i].measurementDateTime); 
      console.log(JSONdata.measurementPoints[i].measurementValue); 
     });´ 

ich in dieser Funktion irgendwo denke ich, etwas falsch zu machen, hoffen, dass Sie mir helfen, herauszufinden, was das Problem ist :)

Codepen: http://codepen.io/laczko090/pen/jrRPBZ

Vielen Dank im Voraus!

Answer 1

Endlich habe ich eine Lösung gefunden, die funktioniert, ich habe die Randwerte zur Punktposition hinzugefügt und scheint nun korrekt ausgerichtet zu sein.

´d3.select('svg').append('circle') 
       .attr("cx", x(_date)+40) 
       .attr("cy", y(_temp)+20) 
       .attr("r", 5) 
       .attr("pointer-events", "none") 
       .attr("id", "actPoint") 
       .style({ 
        'stroke': 'none', 
        'fill': 'red', 
        'fill-opacity': 0 
       });´