mouseover中的多个参数 - d3.js

Question

我一直在试验d3.js中的工具提示，但我很难让它准确行事。

这是我的div.tooltip：

div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

这是我的功能，我试图绘制一些数据点。 x轴为date，y轴为price。数据由symbol着色。当悬停在每个点上时，我试图获取数据点以扩大其颜色并填充其颜色。这工作正常。我还想要一个小文本框浮动到它的右上角，其中包含有关日期/价格的信息。出于某种原因，对于每个数据点，它出现在我的图表左下方的x轴下方。如下图所示：

// Add some datapoints
        svg.selectAll("dot")
            .data(data)
            .enter().append("circle")
            .attr("r", 1.5)
             .style("fill", "white")    
             .style("opacity", .8)  
             .style("stroke-width", 1) 
            .attr("cx", function(d) { return x(d.date); })
            .attr("cy", function(d) { return y(d.price); })
            .style("stroke", function(d) { return color(d.symbol); })

            .on("mouseover", function(d) {
                d3.select(this).attr("r", 10).style("fill", function(d) { return color(d.symbol); });

               div.transition()     
                .duration(200)      
                .style("opacity", .9);      

             div.html(formatTime(d.date) + "<br/>"  + d.price)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY-28) + "px");    


            })

e.g。当我将鼠标悬停在此绿色点上时，它会放大并填​​充，但文本框显示在左下方没有文字？