D3 всплывающая подсказка не отображается в Firefox

Question

Я разработал диаграмму некоторое время назад, и она работала правильно. Недавно я заметил, что всплывающая подсказка не работает (больше) в Firefox, хотя она работает правильно в Safari (как в Mac OS). Может ли кто-нибудь предположить, что может вызвать проблему?

График встроен в сайт Drupal в http://www.climateactionnow.ca/cumulative-manmade-emissions-1854-2010

UPDATE: Поскольку размещение этого я нашел несколько сообщений о ошибках такого рода, используя 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.

В результате чего всплывающая подсказка не видна.

Таким образом, исправление заключается в том, чтобы включить всплывающую подсказку без событий мыши. С помощью pointer-events:none чтения here

Так внутри 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")