Javascript D3工具提示未在Firefox中显示

不久前我开发了一个图表，它工作正常。最近我注意到工具提示在Firefox中已经不起作用了，尽管它在Safari（都在Mac OS上）中工作正常。有人能提出问题的原因吗

该图表嵌入在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>

var w=450，
h=500，
r=数学最小值（w，h）/2，
颜色=d3.scale.category20c（）；
功能prettyAlert（p_消息、p_标题）{
p|title=p|title |？“”；
$（p_消息）。对话框({
标题：p_标题，
宽度：400，
身高：400，
可调整大小：false，
莫代尔：是的，
覆盖：{
背景色：“000”，不透明度：0.5
},
关闭：功能（ev、ui）{
$（this.remove（）；
}
});
}
悬停=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“弧悬停”）
.style（“显示”、“无”）
.风格（“位置”、“绝对”）；
var svg=d3.选择（#图表”）.追加（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换”（+w/2+）、“+h/2+”）；
var partition=d3.layout.partition（）
.sort（空）
.size（[2*Math.PI，r*r]）
.children（函数（d）{return isNaN（d.value）？d3.entries（d.value）：null；}）
.value（函数（d）{返回d.value；}）；
var arc=d3.svg.arc（）
.startAngle（函数（d）{返回d.x；}）
.endAngle（函数（d）{返回d.x+d.dx；}）
.innerRadius（函数（d）{return Math.sqrt（d.y）；}）
.outerRadius（函数（d）{return Math.sqrt（d.y+d.dy）；}）
;
d3.json（“../sites/default/d3_files/json/ranking.json”），函数（json）{
path=svg.data（d3.entries（json））.selectAll（“path”）
.数据（分区.节点）
.enter（）.append（“svg:path”）
.attr（“d”，弧）
.attr（“填充”，函数（d）{
如果（d.key！=“未属性化”）{
返回颜色（d键）；
}
否则{
返回“透明”；
}//结束其他
})//末端填充
.style（“笔划”，函数（d）{
如果（d.key==“未属性化”）{
返回“浅灰色”；}
})//结束行程
。打开（“单击”，放大）
.每个（隐藏）
.on（“mouseout”），函数（d）{
d3.选择（“主体”）
.选择（“.arcs悬停”）
.样式（“显示”、“无”）；
d3.选择（本）
.style（“笔划宽度”、“1px”）
})//结束鼠标输出
.on（“mousemove”，函数（d）{
var bodyOffset=document.body.getBoundingClientRect（）；
d3.选择（本）
.样式（“笔划宽度”、“1px”）；
d3.选择（“主体”）
.选择（“.arcs悬停”）
.style（“显示”、“块”）
.style（“top”，（d3.event.clientY-bodyoffset.top-300）+“px”）
.style（“左”（d3.event.clientX-bodyoffset.left-20）+“px”）
.html（函数（）{
var单位=计算单位（d键）；
返回d.key+“
”+d3.round（d.value/1000，2）+单位；
})//结束html
})//结束鼠标移动
；//结束附加g
}); // 结束d3.json
函数计算器（类型）{
//str.indexOf（“欢迎”）
如果（（type.indexOf（“Production”）！=-1）| |（type.indexOf（“Flaring”）！=-1））{//found
返回“GtCO2”
}
否则{
返回“GtCO2e”
};
};
功能clickAlert（标签）{
};
//将指定节点扭曲为其父节点的80%。
功能放大（节点）{
if（parent=node.parent）{
var父级，
x=父级.x，
k=.8；
parent.children.forEach（函数（同级）{
x+=重新定位（同级，x，同级==节点
？parent.dx*k/node.value
：parent.dx*（1-k）/（parent.value-node.value））；
});
}否则{
重新定位（节点，0，node.dx/node.value）；
}
path.transition（）//是路径-未定义
.持续时间（750）
.attrTween（“d”，arcTween）；
}; // 端放大
//使用比例k递归地将节点重新定位到位置x。
函数重新定位（节点，x，k）{
节点x=x；
if（node.children&（n=node.children.length））{
变量i=-1，n；
而（++i

原因是，在FF中，当工具提示

div

进入显示时，鼠标事件

mouseout

被触发，因此它得到

display:none

因此，工具提示不可见

因此，修复方法是使工具提示div不包含鼠标事件。 使用

指针事件：无

读取

因此，在css中添加：

.arcs-hoverover{
  pointer-events:none
}

或者在代码中，在渲染后添加以下内容：

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

---

希望这有帮助

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

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

---

我有一张D3V4散点图。我的工具提示在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;

。工具提示{
位置：绝对位置；
z指数：10；
可见性：隐藏；
指针事件：无；/*我将指针事件添加到css中，并修复了它。非常感谢。