javascript - D3 工具提示未在 Firefox 中显示

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");

希望这对您有所帮助!