通过 JavaScript 生成的 C3 SVG 图表中的换行符答案

【问题标题】：Line break in C3 generated SVG chart via JavaScript通过 JavaScript 生成的 C3 SVG 图表中的换行符
【发布时间】：2015-12-04 06:13:08
【问题描述】：

我需要关于在 html 中生成换行符的帮助。

Javascript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html 返回如下

<div>jan <br> 2015</div>

预期结果：我需要在 html 中换行，但不应呈现 <br> 标记。

更新：我想要的是 "jan" 在第一行和下一行 "2015"

我在 c3 图表 x 值中使用这些值。

JSFIDDLE

提前致谢。

【问题讨论】：

那行不通。你可以在他提供的jsFiddle中试一试。
他们使用的是textContent 而不是innerHTML，即使there are dupes，这些解决方案似乎也不再起作用了。所以我会说你被卡住了。
我正在努力，但我想最好的解决方案是在下方手动渲染另一个 <tspan>...
stackoverflow.com/questions/16701522/… 这个答案表明唯一的方法是创建单独的 tspan，因此您可能必须修改 c3 源代码。
这是一个调整，你可能不喜欢它：jsfiddle.net/k9Dbf/607 但它有效

标签： javascript html c3.js

【解决方案1】：

您的问题陈述有点不精确：您正在使用将生成 svg 元素的 C3.js。

所以返回的标记实际上是<tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan>。

C3 将使用 tspan 的 textContent 属性来附加您的函数返回的文本内容。
正如other questions 中已经说过的，您不能在<tspan> 元素中添加换行符。

因此，有效的解决方案是在另一个 tspan 的下方，在同一个 <text> 元素中创建一个新的 tspan。

不幸的是，除了循环遍历所有其他 tspan 之外，没有办法获得这些精确的元素，所以这听起来像是一个真正的 hack，但这里有一个脚本可以做你想做的事......

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet">
<div id="chart"></div>

【讨论】：

【解决方案2】：

您需要为每个新行创建新的<tspan>。原因是 <tspan> 通常在 <text> 元素中找到。其中有一定的坐标。你不能“反对”那些坐标。

您唯一能做的就是创建另一个具有不同坐标集的<tspan>，然后随意放置。

因为 SVG 文本元素使用与其他 SVG 图形元素相同的渲染方法进行渲染，所以使用相同的坐标系统、转换等也适用。

SVG 文本元素在初始位置呈现第一个字符当前文本位置。

此位置由 SVG 文本的“x”和“y”属性定义元素。

在<text> 元素内，文本和字体属性以及当前文本位置可以用绝对或相对坐标值调整通过包含 <tspan> 元素。

【讨论】：

你能帮我为每个新行创建吗？

【解决方案3】：

也许这就是你需要的：

var calculate= '<pre>' + x + '\n' + y + '</pre>';

您必须将整个内容放在 \n 被解释为换行符的前置标签中。

关于：http://www.sitepoint.com/everything-need-know-html-pre-element/

CodePen 上的演示：http://codepen.io/mizech/pen/gPOrEz

【讨论】：

它不适用于图表，抱歉。我试过了。它呈现为“
```
APR2015
```
”
我认为你需要创建元素

【解决方案4】：

我已经尝试过 abc.html 中的以下代码，它正在运行。请尝试。

    <!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var x = "jun";
var y = "2015";
document.getElementById("demo").innerHTML =x+"<br>"+y;
</script>
</body>
</html>

【讨论】：

都是关于 c3 的，纯 js 总是有效的。您的回答在这种情况下无效。