D3.js散布図が線グラフ上で正しく整列しない

Question

現在、私はD3.jsを学習しており、問題に直面しています。私の問題は、ライングラフに散布図を追加しようとすると、プロットが間違った場所に描画されてしまうことです。私は何が欠けているのか本当にわからない。

のMouseMoveイベントに散布を描画するための責任がある機能：

´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); 
     });´ 

私はあなたが私が問題だかを把握することができます願っています:)

、私は間違って何かを作るのどこかに、この機能ではと思います

コード番号：http://codepen.io/laczko090/pen/jrRPBZ

ありがとうございます！

Answer 1

最後に、解決策が見つかったため、余白の値をポイント位置に追加して正しく配置されているように見えます。

´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 
       });´