D3 工具提示未在 Firefox 中顯示

Question

我前段時間開發了一個圖表，它工作正常。 最近我注意到工具提示在 Firefox 中（不再）工作，盡管它在 Safari 中（在 Mac OS 上）工作正常。 任何人都可以提出可能導致問題的原因嗎？

該圖表嵌入在 Drupal 站點中，網址為http://www.climateactionnow.ca/cumulative-manmade-emissions-1854-2010

更新：自從發布這篇文章以來，我發現了很多關於使用 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在這里閱讀

所以在你的CSS里面添加：

.arcs-hoverover{
  pointer-events:none
}

或者在代碼中渲染后添加：

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

希望這可以幫助！

Answer 2

移動光標時，工具提示的定位會導致 mouseout 事件。 您可以更改距頂部和左側的距離（在您的代碼中：-300 和 -20），這樣光標就不會懸停在工具提示上。

 .style("top", (d3.event.clientY - bodyOffsets.top -300)+"px")
 .style("left",(d3.event.clientX - bodyOffsets.left -20)+"px")

Answer 3

我有一個 D3 v4 散點圖。 我的工具提示在 Chrome、Edge 和 IE 中運行良好； 但不是在 Firefox 中。 在 Firefox 工具提示中，圖表左下角的數據點正確顯示，但右上角的數據點仍然隱藏且不顯示。 這令人費解。

當我按照 Cyril Cherian 的建議將“pointer-events: none”添加到相關 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 的示例使用“pointer-events: none”並且它在我嘗試過的所有瀏覽器中都有效時，我采用了 Cherian 的解決方案。 帶有工具提示和指針事件的 D3 散點圖：無