Question

出于某种原因，有时当我在移动浏览器中查看我的可视化并点击节点（圆圈）时，电话屏幕视图会跳转到左上角。我不明白为什么会发生这种情况，为什么有时它会起作用。

您可以通过在移动浏览器中查看https://codepen.io/kvyb/pen/dRoXpp来查看问题。

这是我的悬停互动的代码，但我认为这不会导致问题：

var node = svg
      .selectAll("circle")
      .data(nodes)
      .enter()
      .append("g")
        .on("mouseover", function(d) {
            div.transition()        
                .duration(200)      
                .style("opacity", .9)
            div .html('<div class="container text-center">'+"<img class='candidate' src=" + "https://raw.githubusercontent.com/kvyb/DataVis/master/HTicons/"+d.clusternumber+".png"+">"+ '</div><p class="tooltiptext">I said "'+d.text+' " '+d.wordcount+" times,<br> which amounts to "+ (Math.round(d.perc * 100) / 100)+"%<br> of all words I used<br> in my speeches in 2016</p>") 
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");
            })          
        .on("mouseout", function(d) {       
            div .transition()       
                .duration(500)      
                .style("opacity", 0);   
        });

我认为这可能是因为我使用了两个悬停实例，这些实例做了不同的事情，但删除一个并没有解决问题。

非常感谢任何帮助。

使用d3.js点击移动设备中的元素时，屏幕视图会跳转

0 个答案: