D3折线图鼠标悬停坐标效果

我正在尝试创建一个折线图，用户可以将鼠标悬停在点上以显示一个圆圈（也可以在页面上进行其他操作，但我将首先让一个圆圈出现）。

我试过几个教程，结果都是一样的：圆圈要么出现在直线上方，要么出现在侧面，几乎不在图表上。

如何使圆出现在其对应的坐标位置。下面是一个问题和d3代码的Fiddle。JS Fiddle中还包括我的其他失败尝试。

基本图表：

var data=[{
    "date":"January 1, 2008","total":'73'},
    {"date":"February 1, 2008","total":'40'},
    {"date":"March 1, 2008","total":'43'},
    {"date":"April 1, 2008","total":'28'},
    {"date":"May 1, 2008","total":'35'},
    {"date":"June 1, 2008","total":'20'},
    {"date":"July 1, 2008","total":'48'}
          ];

var chartWidth =650;
    var chartHeight=375;
    var chartMargins ={
            top:20,
            right: 20,
            bottom: 20,
            left: 50};
    var yScaleDomain=[1, 100];

    var chart = d3.select('#chartCanvas'),
        WIDTH=chartWidth,
        HEIGHT=chartHeight,
        MARGINS= chartMargins;

    //SET AXIS SCALES

    xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return new Date(d.date); }));
   var x = d3.time.scale()
    .range([0, WIDTH]);
var y = d3.scale.linear()
    .range([HEIGHT, 0]);
    bisectDate = d3.bisector(function(d) { return d.date; }).left,
    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain(yScaleDomain);

    //DRAW AXES
    xAxis = d3.svg.axis()
        .scale(xScale),
    yAxis = d3.svg.axis()
        .scale(yScale)
    .orient("left");
    chart.append("svg:g")
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
        .call(xAxis);
    chart.append("svg:g")
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);
    //DRAW LINES/ PLOT DATA

   var lineGen = d3.svg.line()
        .x(function(d) {
            //Date() turns string date to numerical value
            return xScale(new Date(d.date));
        })
        .y(function(d) {
            return yScale(d.total);
        })
        //tell d3 what type of lines to draw (straight/linear ones)
        .interpolate('linear'); 
 chart.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", lineGen);

鼠标悬停尝试1（Fiddle中评论的其他尝试）：

var Y_value; 
    var curve1 = chart.select("path.line").data([data]);
    x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]);
    y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]);

    var circle = chart.append("circle")
            .attr("r", 8)
            .attr("cx", 0)
            .attr("cy", 0)
            .style({fill: '#fff', 'fill-opacity': .2, stroke: '#000', "stroke-width": '1px'})
            .attr("opacity", 0);
    var tooltip = circle.append("chart:title");

    chart.on("mouseover", function() {
        var X_pixel = d3.mouse(this)[0],
            X_date = x.invert(X_pixel);
        var Y_pixel = y(Y_value);
        var pathData = curve1.data()[0]; // recupere donnée de la courbe
        pathData.forEach(function(element, index, array) {
                if ((index+1 < array.length) && (array[index].date <= X_date) && (array[index+1].date >= X_date)) {
                    if (X_date-array[index].date < array[index+1].date-X_date)  Y_value = array[index].val;
                    else Y_value = array[index+1].val;
                }
            });
            circle.attr("opacity", 1)
                .attr("cx", X_pixel)
                .attr("cy", Math.round(y(Y_value)));
            tooltip.text("X = " + (X_date) + "'nY = " + (Y_value));
        });
     chart.append('svg:path')
            .attr('d', lineGen(data))
            .attr('stroke', 'green')
            .attr('stroke-width', 2)
            .attr('fill', 'none');
        stickyChart.append('svg:path')
            .attr('d', lineGen2(data))
            .attr('stroke', 'green')
            .attr('stroke-width', 2)
            .attr('fill', 'none');