d3.js - 工具提示显示在两个单独的行中，在 Firefox 中不起作用

Question

我正在添加带有 html 的 <br> 标签的工具提示。它在 chrome 中运行良好，但在 Firefox 上运行良好。

我的代码:

var dot = svg.append("g")
      .attr("class", "dots")
      .selectAll(".dot")
      .data(interpolateData(1))
      .enter().append("circle")
      .attr("class", "dot")

  // Add a title.
  dot.append("title")
     .each(function() {


      var d = d3.select(this);
d3.select(this).select("title")
       .html(function(d,i) { return d.name + ": " + Math.round(Number(d.avg)) + " avg each month <br>" + d.name + ": Build of "  + Math.round(Number(d.Checkin)) + " hrs each month";});

工具提示应该显示在 2 行中。它在 chrome 中工作正常，但在 Firefox 中不工作。

Answer 1

您使用的 <br> 标签在 SVG 中没有意义——Chrome 以您想要的方式解释它这一事实违反了标准。要在 SVG 中获取多行文本，您基本上有两种选择:

使用多个 text 或 tspan 元素。

使用 foreignObject 嵌入 HTML 并使用例如<br> 那里。

this question 中的更多信息和指针。

编辑:这些选项不适用于 title 元素(感谢 AmeliaBR 指出)。