通过JavaScript在C3生成的SVG图表中添加换行符

Question

我需要帮助生成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

提前感谢。

- Manjunath Siddappa

---

那不起作用。你可以在他提供的jsFiddle中尝试它。 - Cubicle.Jockey

他们正在使用 textContent 而不是 innerHTML，即使存在重复项，解决方案似乎也不再起作用。所以我想说你卡住了。 - Kaiido

我正在努力解决这个问题，但我认为最好的解决方案是手动渲染另一个<tspan>在下面。 - Kaiido

这个答案建议唯一的方法是创建单独的tspan，所以你可能需要修改c3源代码。 - Krystian Laskowski

这里有一个小调整，也许你会不喜欢它：http://jsfiddle.net/k9Dbf/607/，但是它可以运行。 - Kaiido

Answer 1

您的问题陈述有点不够清晰：您正在使用C3.js，它将生成svg元素。

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

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

因此，解决方案就是在同一个<text>元素中创建一个新的tspan，放在另一个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>

- Kaiido

Answer 2

你需要为每一行创建新的<tspan>。原因是<tspan>通常位于<text>元素内，该元素具有一定的坐标。你不能“反对”这些坐标。

唯一能做的就是创建另一个<tspan>，并使用不同的坐标集将其定位。

由于SVG文本元素使用与其他SVG图形元素相同的渲染方法进行呈现，因此相同的坐标系、变换等也适用。

SVG文本元素在初始当前文本位置呈现第一个字符。该位置由SVG文本元素的'x'和'y'属性定义。

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

- Paran0a

---

你能帮我创建每个新行的<tspan>吗？ - Manjunath Siddappa

Answer 3

也许这就是你需要的：

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

你需要将整个内容放在pre标签中，这样\n才会被解释为换行符。

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

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

- cluster1

---

它对图表无效，抱歉。我已经尝试过了。它呈现为“<pre>APR2015</pre>”。 - Manjunath Siddappa

我认为你需要创建元素。 - Raider

Answer 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> 

- Sanjay

---

这一切都与c3有关，纯js总是有效的。你的答案在这个情境下无效。 - Silviu Burcea