Question

我前段时间开发了一个图表并且工作正常。最近我注意到Firefox中的工具提示不再有效（尽管它在Safari中正常工作）（两者都在Mac OS上）。任何人都可以建议可能导致问题的原因吗？

该图表嵌入在http://www.climateactionnow.ca/cumulative-manmade-emissions-1854-2010

的Drupal网站中

更新：自发布此消息后，我发现了许多使用Firefox的错误报告......但尚未找到解决方案。

代码是：

<script>

var w = 450,
h = 500,
r = Math.min(w, h) / 2,
color = d3.scale.category20c();

function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
   title: p_title,
   width:400,
   height:400,
   resizable: false,
   modal : true,
   overlay: { 
     backgroundColor: "#000", opacity: 0.5 
     },
   close: function(ev, ui) {
     $(this).remove(); 
     }
});
}
hoverover=d3.select("body")
.append("div")
.attr("class","arcs-hoverover")
.style("display","none")
.style("position","absolute");

var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, r * r])
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });

var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); })
;

d3.json("../sites/default/d3_files/json/ranking.json", function(json) {

path = svg.data(d3.entries(json)).selectAll("path")
.data(partition.nodes)
.enter().append("svg:path")
.attr("d", arc)
.attr("fill", function(d) { 
     if (d.key != "Not attributed") {
        return color(d.key);
        }
     else {
        return "transparent";
        } // end else
     }) // end fill
 .style("stroke", function(d) { 
     if (d.key == "Not attributed") {
        return "lightgrey";}
     }) // end stroke
.on("click", magnify)
.each(stash)
.on("mouseout",function(d){ 
  d3.select("body")
  .select(".arcs-hoverover")
  .style("display","none");  
  d3.select(this)
  .style("stroke-width","1px")
}) // end mouseout

.on("mousemove",function(d){
   var bodyOffsets = document.body.getBoundingClientRect();
   d3.select(this)
     .style("stroke-width","1px");
   d3.select("body")
     .select(".arcs-hoverover")
     .style("display","block") 
     .style("top", (d3.event.clientY - bodyOffsets.top -300)+"px")
     .style("left",(d3.event.clientX - bodyOffsets.left -20)+"px")
     .html(function( ){
          var units=calcUnits(d.key);
           return d.key + "<br />" + d3.round(d.value/1000, 2)+ units;
     }) // end html
  }) // end mousemove

 ; // end append g
}); // end d3.json

function calcUnits (type) {
// str.indexOf("welcome")
if ((type.indexOf("Production")!=-1) || (type.indexOf("Flaring")!=-1))   { // found
  return " GtCO2"
 }
else {
  return " GtCO2e"
 };
};

function clickAlert (label) {
};

// Distort the specified node to 80% of its parent.
function magnify(node) {
if (parent = node.parent) {
var parent,
x = parent.x,
k = .8;
parent.children.forEach(function(sibling) {
    x += reposition(sibling, x, sibling === node
    ? parent.dx * k / node.value
    : parent.dx * (1 - k) / (parent.value - node.value));
});
} else {
reposition(node, 0, node.dx / node.value);
}

path.transition() // was path - undefined
.duration(750)
.attrTween("d", arcTween);
}; // end magnify

// Recursively reposition the node at position x with scale k.
function reposition(node, x, k) {
node.x = x;
if (node.children && (n = node.children.length)) {
    var i = -1, n;
    while (++i < n) x += reposition(node.children[i], x, k);
    }
return node.dx = node.value * k;
}; // end reposition

// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}; // end stash

// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
    var b = i(t);
    a.x0 = b.x;
    a.dx0 = b.dx;
    return arc(b);
    };
}; // end arcTween
</script>

Answer 1

原因是在FF显示工具提示div时，鼠标事件mouseout会被触发，因此它会获得display:none。

因此，工具提示不可见。

所以解决方法是让工具提示div不接受任何鼠标事件。使用pointer-events:none阅读here

所以在你的CSS里面添加：

.arcs-hoverover{
  pointer-events:none
}

或者在代码中添加以下内容：

d3.selectAll(".arcs-hoverover").style("pointer-events", "none");

希望这有帮助！

Answer 2

当光标移动时，工具提示的定位导致鼠标移出事件。您可以改变顶部和左侧的距离（在您的代码中：-300和-20），这样光标就不能悬停在工具提示上。

// This snippet hides the system bars.
private void hideSystemUI() {
// Set the IMMERSIVE flag.
// Set the content to appear under the system bars so that the content
// doesn't resize when the system bars hide and show.
mDecorView.setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
        | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
        | View.SYSTEM_UI_FLAG_IMMERSIVE);
}

// This snippet shows the system bars. It does this by removing all the  flags
// except for the ones that make the content appear under the system bars.
private void showSystemUI() {
mDecorView.setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

Answer 3

我有一个D3 v4散点图。我的工具提示在Chrome，Edge和IE中运行良好；但不适用于Firefox。在Firefox中，针对图表中左下角的数据点正确显示了工具提示，但仍处于隐藏状态，而未针对右上角的数据点显示。令人困惑。

当我遵循西里尔·谢里安（Cyril Cherian）的建议在相关CSS中添加“指针事件：无”时，该问题在Firefox中得以解决，而没有破坏Chrome，Edge或IE。

.tooltip {
position: absolute;
z-index: 10;
visibility: hidden;
pointer-events: none;    /* <======= added code ====== */
background-color: lightblue;
text-align: center;
padding: 4px;
border-radius: 4px;
font-weight: bold;
color: black;

}

当我看到Chris Williams的示例使用“指针事件：无”并且在我尝试过的所有浏览器中都有效时，我采用了Cherian的解决方案。 D3 scatterchart with tooltips and pointer-events: none

D3工具提示不在Firefox中显示

3 个答案: