Question

我希望我的工具提示在悬停时写下日期和值。当您在图表上移动值线时，它还应该更新日期和值。

我能够写一个值，但日期返回undefined，并且值没有按预期更新。

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

我在这里发布了一个jsfiddle：[1]：http://jsfiddle.net/tommy6s/6L832q7e/ 谢谢！

//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')          
                });

Answer 1

您遇到的问题是您正在创建区域图表。使用面积图，只有一条路径。（路径是图表的整个区域。）因此，mouseover和mouseout事件只表示区域内外的鼠标移动，以及该区域的相关数据值（它是＆＃39; s传递给事件处理程序的d参数是整个数据点数组。您可以使用

在代码中设置它

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

要让您的工具提示工作，您必须获取鼠标相对于图表容器的x和y属性（使用d3.mouse()函数），然后从SVG坐标范围转换它们到数据的x和y域。使用该信息，您可以适当地更新工具提示文本。请注意，您还必须更新mousemove事件中的工具提示文字，以跟上区域内的鼠标移动。

工具提示未按预期工作

1 个答案: