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

Question

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

Javascript

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

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

Html returns 如下图

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

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

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

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

JSFIDDLE

提前致谢。

Answer 1

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

您唯一能做的就是用不同的坐标集创建另一个 <tspan> 并根据需要放置它。

Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc also apply.

The SVG Text Element renders the first character at the initial current text position.

This position is defined by the 'x' and 'y' attributes of the SVG Text Element.

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.

Answer 2

也许这就是您所需要的：

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

Answer 3

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

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

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

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

不幸的是，除了遍历所有其他 tspans 之外，没有办法获得这些精确的元素，所以这听起来像是一个真正的 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>

Answer 4

我已经尝试了 abc.html 中的以下代码，它是 working.please 尝试。

    <!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 中的换行符通过 JavaScript 生成 SVG 图表

Line break in C3 generated SVG chart via JavaScript

html

javascript

c3.js