小编Joe*_*Joe的帖子

我试图添加一个多行工具提示并遇到一些问题,主要是通过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仍然忽略它.对此没有简单的解决方案吗？