D3多行工具提示用于SVG元素 [英] D3 multi-line tooltip for SVG element

问题描述

我正在尝试添加一个多行工具提示并有一些问题，主要是通过互联网浏览器处理它们的方式。我实际上可以让我的html看起来正确地渲染，但IE忽略工具提示中的换行符，并将其放在同一行。
这里是一些我试过的代码段（不是确切的代码，我的开发站在封闭的网络，所以请忽略丢失不相关的信息，如位置等）

  var bars = svg.selectAll（。bar）
 .data（data）
 .enter 
 .attr（class，bar）
 .append（title）text（function（d）{returnLine One X：+ dx +\\\
Line Two Y ：+ dy}）; 
  

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

 < title> 
 Line One X：25 
第二行Y：30 
< / title> 
  

Firefox处理的只是两行，但IE忽略换行并将它们放在同一个线。
我试过很多变化。如果我使用rect元素的title属性，FF渲染它就好了，IE完全忽略它，不会显示工具提示。
我甚至为了强制标题元素在rect下有tspans和br这样（删除上面的最后一个附加标题）

  var barsTitle = bars.append（title）; 
 barsTitle.append（tspan）。text（function（d）{returnLine One X：+ d.x}）; 
 barsTitle.append（br）; 
 barsTitle.append（tspan）。text（function（d）{returnLine Two Y：+ d.y}）; 
  

它会显示我认为正确的HTML

 < title> 
< tspan> Line One X：25< / tspan> 
< br>< / br> 
< tspan>第二行Y：30< / tspan> 
< / title> 
 

在这里，IE完全忽略br，即使我将第2行插入br打开和关闭标签）IE仍然忽略它。

解决方案

这里有一个IE11友好的解决方案：

  tspan：nth-​​child（2n）{display：block;}   < svg width =100height =100> < rect fill =redx =0y =0width =50height =50> < tspan>< tspan>这是第1行< / tspan>< tspan>这是第2行< / tspan& tspan>< / title> < / rect> < / svg>  

有两个细微之处：

1. Chrome会在< tspan> 元素周围留出空白，因此不应缩进;


2. IE11使用 display：block 呈现连续的< tspan> 双线间距（我找不到CSS技巧来避免这种情况），所以样式应用于每隔一个元素。

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

请注意，虽然文字内容元素确实遵守 display 属性，工具提示的演示完全由浏览器完成，因此此技术在将来可能无法正常工作。

< blockquote>

...'desc'和'title'元素不会作为图形的一部分呈现。用户代理可，例如，将title元素显示为工具提示，因为指针设备移动到特定元素。

_{（强调我）}

资料来源： SVG spec， desc 和 title 元素。

I'm attempting to add a multi-line tooltip and having some issues, mostly with the way internet explorer handles them. I can actually get my html to seemingly render correctly, but IE ignores line breaks in the tooltip and puts it all on the same line. Here are some snippets that I tried (not exact code, my dev station is on a closed network, so please ignore missing non-relevant info such as position, etc.)

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});

This seems almost the best solution and renders the HTML to look like

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

Firefox handles that just fine as two lines, but IE ignores the line break and puts them on the same line. I've tried many variations. If I use the title attribute of the rect element, FF renders it just fine, IE completely ignores it and won't show a tooltip. I even went so far as to force the title element under rect to have tspans and a br like this (removing the last append title above)

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});    

which renders what I would think is correct HTML

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

Here again IE completely ignores the br, even if I insert line 2 into the br (between the br open and close tag) IE still ignore it. Is there no simple solution to this?

解决方案

Here's an IE11-friendly solution:

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>

There are two subtleties:

1. Chrome renders whitespace around the <tspan> elements, so they should not be indented;
2. IE11 renders consecutive <tspan> elements with display:block with double line spacing (I couldn't find a CSS trick to avoid this), so the style is applied to every other element.

This version renders as four lines on Chrome 41, Safari 8, Firefox 37 (OSX Yosemite), and IE11 (Windows 7). Unfortunately it still renders as a single line in IE9-10. If you need multi-line display here I'd suggest your own <title> rendering based on mouse events.

Note that, whilst text content elements do respect the display property, the presentation of tooltips is entirely up the browser, so this technique may not work in the future.

...'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements.

_{(emphasis mine)}

Source: SVG spec, desc and title elements.

这篇关于D3多行工具提示用于SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！