带有鼠标悬停的嵌套数据上的一个 d3 行

Question

我已经设法创建了我想要的线条和情节，但不幸的是我未能在线条上创建简单的悬停。

这是主要代码：

var groupclusters = d3.nest()
            .key(function(d) { return d.clustindex; })
            .entries(expsdata);

var svg = d3.select("#container3")
                .selectAll("svg")
                .data(groupclusters)
                .enter()
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform","translate(" + margin.left + "," + margin.top + ")");

             svg.append("path")
                .attr("fill", "none")
                .attr("stroke", '#a65628')
                .attr("stroke-width", 1)
                .attr("class", "line")
                .attr("d", function(d){
                    return d3.line()
                  .x(function(d) { return x(d.mtbname); })
                  .y(function(d) { return y(+d.clustcenters); })(d.values);
                });

上面的代码创建了下面的图：

当我悬停在线上获取值时，我将如何制作它？

我在下面试过这个但是在悬停时我得到“未定义”，这意味着它找不到数据/值！但是数据在那里（groupclusters）！

             svg.append("path")
                .attr("fill", "none")
                .attr("stroke", '#a65628')
                .attr("stroke-width", 1)
                .attr("class", "line")
                .attr("d", function(d){
                    return d3.line()
                  .x(function(d) { return x(d.mtbname); })
                  .y(function(d) { return y(+d.clustcenters); })(d.values);
                }).on('mouseover', function(d){
                               tooltip1.transition().duration(10)
                                       .style("opacity",0.8)
                                       .style("left",(d3.event.pageX+20)+"px")
                                       .style("top", (d3.event.pageY-35)+"px");
                               tooltip1.html("<p>"+d.mtbname+"</p>");})
                  .on('mouseout', function(d){
                             tooltip1.transition().duration(100).style("opacity",0);});;

编辑

我正在使用 d3 5.7.0。这些是我的体重秤：

var x = d3.scaleBand()
                .domain(mtbsnameslist)
                .range([ 0, width ]);

var y = d3.scaleLinear()
                .domain([0, d3.max(expsdata, function(d) { return +d.clustcenters; })])
                .range([ height, 0 ]);

Answer 1

感谢 Gerardo Furtado 我找到了答案！将鼠标悬停更改为：

.on('mouseover', function(d){
                    x.invert = function(x) {
                                    var domain = this.domain();
                                    var range = this.range();
                                    var scale = d3.scaleQuantize().domain(range).range(domain);
                                    return scale(x);
                                    };
                    var coordinates= d3.mouse(this);
                    var xcoo = coordinates[0];
                    
                               tooltip1.transition().duration(10)
                                       .style("opacity",0.8)
                                       .style("left",(d3.event.pageX+20)+"px")
                                       .style("top", (d3.event.pageY-35)+"px");
                               tooltip1.html("<p>"+x.invert(xcoo)+"</p>");})
.on('mouseout', function(d){
         tooltip1.transition().duration(100).style("opacity",0);});