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

2018-07-01 22:51:39

我需要在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

提前致谢。

你的问题陈述有点不庄重：你使用的C3.js会产生svg元素。

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

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

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

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

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

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

你可以做的唯一事情就是创建另一个带有不同坐标集的<tspan>并根据你的喜好定位它。

由于SVG文本元素使用与SVG图形元素的其余部分相同的呈现方法呈现，因此同样的坐标系，变换等也适用。

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

该位置由SVG文本元素的'x'和'y'属性定义。

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

也许这就是你需要的：

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

链接地址: http://www.djcxy.com/p/89079.html

上一篇: Line break in C3 generated SVG chart via JavaScript

下一篇: What is the best approach for redirection of old pages in Jekyll and GitHub Pages?