Question

我正在使用d3.js进行简单的数据可视化。它适用于Chrome和Firefox，但不适用于Safari。 ForeignObject在Safari Mac浏览器上显示奇怪的行为。文本向左移动（附带图片）。此问题与两个div的位置有关。我删除了 #innerDiv 上的位置：绝对和父div上的位置：相对。这样就解决了问题。但是，我无法使文本垂直居中（这正是上述目的）。

在IOS Safari（移动版）上，它甚至不显示任何内容（附有图片）

可视化是什么？
它显示了科学家的生活事件。将鼠标悬停在网格的彩色部分上时，它将在右侧框中显示相应的信息。
以下是显示foreignObject的代码部分。

      /* MAKE COMPLETE MODAL BOX HERE */
      var modalBox = d3.select("#mainSVG")
                     .append("g")
                     .attr("id", "modalBOXgroup")
                     .append("rect")
                     .attr("id", "modalBOX")
                     .attr("x", "600")
                     .attr("y", "45")
                     .attr("rx", "20")
                     .attr("rx", "20")
                     .attr("width", "580")
                     .attr("height", getSVGheight() - 60)
                     .style("fill", singleDayEvents[0].color)
                     .style("stroke", "white")
                     .style("stroke-width", "5px");

      var modalTitle = d3.select("#modalBOXgroup")
                               .append("foreignObject")
                               .attr("x", "620")
                               .attr("y", "70")
                               .attr("width", "540")
                               .attr("height", getSVGheight() - 110)
                               .append("xhtml:div")
                               .style("height", "100%")
                               .style("color", "white")
                               .style("font-family", "sans-serif")
                               .style("position", "relative")
                               .append("xhtml:div")
                               .attr("id", "innerDiv")
                               .style("position", "absolute")
                               .style("top", "50%")
                               .style("width", "100%")
                               .style("transform", "translateY(-50%)")
                               .style("overflow", "auto")
                               .append("h3")
                               .attr("id", "modalTitle")
                               .style("color", "white")
                               .style("text-align", "center")
                               .style("text-decoration", "underline")
                               .text(singleDayEvents[0].title);

      var modalDescription = d3.select("#modalBOXgroup foreignObject #innerDiv")
                               .append("p")
                               .attr("id", "modalDescription")
                               .style("font-size", "14px")
                               .style("text-align", "justify")
                               .style("line-height", "30px")
                               .text(singleDayEvents[0].desc);

      /* MAKE COMPLETE MODAL BOX HERE */

您可以访问此链接进行签出： https://conductscience.com/age-when-charles-darwin/

PS 我尝试将命名空间（具有xmlns属性）添加到foreignObject中的两个div中。但这没用。

图片： Safari Mac Issue Safari IOS Issue

ForeignObject在Safari浏览器中不起作用

0 个答案: