Javascript 工具提示未按预期工作

我希望我的工具提示在鼠标悬停时写入日期和值。它还应该在您沿着图表上的价值线移动时更新日期和价值

我可以写一个值，但日期返回未定义，并且该值未按预期更新

我是D3新手，所以我很困惑。任何帮助都将不胜感激

我在这里发布了一个JSFIDLE:[1]： 谢谢大家!

//draw tooltip div
var tooltip = d3.select(".wrapper").append("div")
   .attr("class", "tooltip");

                tooltip.append("p")
                .attr("class", "date")
                .html("<strong>" + d.date + "</strong>");

                tooltip.append("p")
                .attr("class", "value")
                .html("<span>" + d.value + "</span>");

           //tooltip code
            var path = svg.selectAll("path");

                path.on('mouseover', function(d){
                    tooltip.select('p', '.date').html(d[0].date)
                    tooltip.select('p', '.value').html('$ ' + d[1].value)
                    tooltip.style('display', 'block');
                });

                path.on('mouseout', function(){
                    tooltip.style('display', 'none');
                });

                path.on('mousemove', function(d){
                tooltip.style('left', (d3.event.pageX + 20) + 'px')
                  .style('top', (d3.event.pageY + 0) + 'px')          
                });     

---

您遇到的问题是您正在创建一个面积图。对于面积图，只有一条路径。路径是图表的整个区域。所以mouseover和mouseout事件只是表示鼠标在区域上或区域外的移动，而传递给事件处理程序的d参数所对应的区域的相关数据值就是整个数据点数组。在代码中使用

focus.append("path")
    .datum(data)

---

要使工具提示正常工作，必须使用d3.mouse函数获取鼠标相对于图表容器的x和y属性，然后将这些属性从SVG坐标范围转换为数据的x和y域。有了这些信息，您可以适当地更新工具提示文本。请注意，您还必须更新mousemove事件中的工具提示文本，以跟上区域内的鼠标移动。

看起来应该是d.date而不是d[0].date。我尝试了d.date，但它返回未定义。谢谢Stephen！我要试试你的建议，我搞不懂。如果我能得到一个关于如何应用d3.mouse函数的提示，那将对我有所帮助，因为我看了d3.mouse api，但不知道如何应用它。我正在尝试将建议的演示集成到我的图表中。我做了一些改进，但逻辑混乱了。如果你能看一看我的小提琴，并提供更多的意见，我将不胜感激。