【发布时间】：2016-09-26 11:25:29
【问题描述】：
此问题仅适用于 EDGE 浏览器
到目前为止，对于我们的dc.js 图表 - 我们已经尝试过9 different approaches for showing title attribute value in new line
现在，当我尝试用我的图表来实现它们时：
.renderTitle(true)
.title(function (p) {
return [
'ABC',
'DEF',
'GHI',
'JKL']
.join('\n');
})
\n 被替换为
\x0A
\t

他们 seems to work 用于 HTML。
我怀疑他们只使用 HTML，所以我尝试了SVG only fix as suggested by @joews
.renderTitle(true)
.title(function (p) {
return [
'<tspan>ABC',
'</tspan><tspan>DEF',
'</tspan><tspan>GHI',
'</tspan><tspan>JKL'</tspan>']
.join('');
})
并且样式规则也适用：
tspan:nth-child(2n) {
display: block;
}
也尝试过纯 d3.js 方法
.append("svg:title")
.append("tspan")
.text('ABC'+'\nDEF'+'\nGHI'+'\nJKL')
这些都不能在工具提示中引入新的一行。
解决方法是什么？
【问题讨论】：
-
据我了解，这个问题纯粹是关于 Microsoft Edge 上
title标记的行为。我已经编辑了适合的标签。 -
谷歌搜索“svg title element newline”会引发很多老问题——看起来浏览器行为已经很长时间不一致了。也许改用 d3-tip？
-
是的，看起来您正在尝试做的事情没有一致的支持。 IMO 如果您有格式化需求，最好使用 d3-tip。
标签： javascript html svg microsoft-edge dc.js