Question

当用户将鼠标悬停在散点图上的一个圆圈标记上时，我试图显示一些相关数据。

但这不起作用。我已经搜索了一段时间，我尝试使用有效的浏览器工具提示，但它会产生延迟，我不想依赖它。这是我的数据：

目前，我在添加 svg 的同一个 div 中创建了一个 div，然后仅在用户悬停时附加文本。我想显示 all_title 列中的数据。我的js代码：

var div = d3.select("#scatter")
                        .append("div")
                        .attr("class", "tooltip")
                        .style("opacity", 0);

        var svg_scatter= d3.select("#scatter")
                                .append("svg")
                                .attr('id', 'scatter_plot')
                                .attr("width", width + margin.left + margin.right)
                                .attr("height", height + margin.top + margin.bottom)
                                .append("g")
                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg_scatter.append('g')
                .attr("id", "circles")                   
                .attr("clip-path", "url(#chart-area)")  
                .selectAll("circle")
                .data(Dialogue_dataset)
                .enter()
                .append("circle")
                .attr("cx", function (d) { return xScale(d.percentage); } )
                .attr("cy", function (d) { return yScale(d.value); })
                .on("mouseover", function(d) {
          
                        var xPosition = parseFloat(d3.select(this).attr("cx"));
                        var yPosition = parseFloat(d3.select(this).attr("cy"));
                
                   
                        svg_scatter.append("text")
                                .attr("id", "tooltip")
                                .attr("x", xPosition)
                                .attr("y", yPosition)
                                .text( "list of movies "+d.all_title);

                        })
                .on("mouseout", function() {

                        //Remove the tooltip
                        d3.select("#tooltip").remove();
                
                });

我的 HTML：

<div id = "scatter"></div>

Answer 1

从 d3 v6 开始，event listener signature 如下：

listener(event, datum)

所以你想写，

            .on("mouseover", function(event, d) {
      
                    var xPosition = parseFloat(d3.select(this).attr("cx"));
                    var yPosition = parseFloat(d3.select(this).attr("cy"));
            
               
                    svg_scatter.append("text")
                            .attr("id", "tooltip")
                            .attr("x", xPosition)
                            .attr("y", yPosition)
                            .text( "list of movies "+d.all_title);

                    })

如何修复 d3 工具提示上的未定义问题？

1 个答案: