用于SVG元素的D3多行工具提示

Question

我试图添加一个多行工具提示并遇到一些问题,主要是通过Internet Explorer处理它们的方式.我实际上可以让我的html看起来正确渲染,但IE忽略了工具提示中的换行符并将它们全部放在同一行.以下是我尝试的一些片段(不是确切的代码,我的开发站位于封闭的网络上,所以请忽略丢失的不相关信息,如位置等)

var bars = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.append("title").text(function(d){ return "Line One X:" + d.x + "\nLine Two Y:" + d.y});

这似乎是最好的解决方案,并使HTML看起来像

<title>
Line One X: 25
Line Two Y: 30
</title>

Firefox只处理两行,但IE忽略换行符并将它们放在同一行.我尝试了很多变化.如果我使用rect元素的title属性,FF渲染它就好了,IE完全忽略它并且不会显示工具提示.我甚至甚至强迫rect下的title元素有tspans和这样的br(删除上面的最后一个追加标题)

var barsTitle = bars.append("title");
barsTitle.append("tspan").text(function(d){ return "Line One X:" + d.x});
barsTitle.append("br");
barsTitle.append("tspan").text(function(d){ return "Line Two Y:" + d.y});    

这使我认为是正确的HTML

<title>
<tspan>Line One X: 25</tspan>
<br></br>
<tspan>Line Two Y: 30</tspan>
</title>

这里IE再次完全忽略了br,即使我将第2行插入br(br开放和关闭标签之间)IE仍然忽略它.对此没有简单的解决方案吗？

Answer 1

这是IE11友好的解决方案:

tspan:nth-child(2n) {
  display: block;
}

<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title><tspan>This is line 1</tspan>
<tspan>This is line 2</tspan>
<tspan>This is line 3</tspan>
<tspan>This is line 4</tspan></title>
    </rect>
  </svg>

有两个细微之处:

1. Chrome会在<tspan>元素周围呈现空白,因此它们不应缩进;
2. IE11 使用双行间距渲染连续<tspan>元素display:block(我找不到CSS技巧来避免这种情况),因此样式应用于每个其他元素.

此版本在Chrome 41,Safari 8,Firefox 37(OSX Yosemite)和IE11(Windows 7)上呈现为四行.不幸的是,它仍然在IE9-10中呈现为单行.如果您需要多行显示,我建议您自己<title>基于鼠标事件进行渲染.

请注意,虽然文本内容元素确实尊重display属性,但工具提示的显示完全取决于浏览器,因此该技术将来可能无法使用.

...'desc'和'title'元素不会呈现为图形的一部分.然而,用户代理可以例如将"标题"元素显示为工具提示,因为指示设备在特定元素上移动.

_{(强调我的)}

来源:SVG规范desc和title元素.